Router Dienste für Kernkomponenten sorgen Angular 2

Question

I NG2 app, wo ich app/app.module haben ... und Kern/core.module ....

in Core-Module habe ich einige Module, die auf verwendet App Top-Level und nur einmal (wie in offiziellen Dokumenten), aber eines dieser Module benötigt Router-Modul (einige Funktionalität arbeitet mit Router).

Aber Router ist in App.Module (mit allen App-Routing). Und ich habe Problem - Kein Anbieter für ActivatedRouteSnapshot von core/header/header.component

Wie kann ich es lösen? Sollte ich meinen Header vom Core zum App-Ordner platzieren oder sollte ich Router für Core-Module bereitstellen? Vielen Dank.

P.S. Update mit Router-Modul. Ich habe immer noch einen Fehler - Kein Anbieter für RouterStateSnapshot!

Andere interessante Dinge, die Standard-Router und aktivierteRoute funktioniert. Wenn ich also RouterStateSnapshot vom Konstruktor entferne (und relative console.log natürlich entferne), funktioniert der ganze Code gut. Sieht so aus wie RouterModule verfügbar ist und es ist wirklich seltsam.

import { NgModule, Component, OnInit} from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
//import { ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated'; 
import { Router, ActivatedRoute, Params, RouterStateSnapshot } from '@angular/router'; 
/* ------- !Angular2 core ---------*/ 

import {HTTPPatientsListService} from '%cgm_sharedServices%/http_patients_list.service'; 
/* ------- !Services ---------*/ 

import { Config } from 'appConfig'; 
/* ------- !Config ---------*/ 


@Component({ 
    selector: 't_breadcrumbs', 
    template: ` 

     <h1>Bread</h1> 

     <!--<div class="row wrapper border-bottom white-bg page-heading">--> 
     <!--<div class="col-lg-10">--> 
      <!--<h2>{{staticData.title}}</h2>--> 
      <!--<ol class="breadcrumb">--> 
       <!--<li>--> 
       <!--<a [routerLink]="['Dashboard']" tabindex="-1">{{staticData.homeName}}</a>--> 
       <!--</li>--> 
       <!--<li *ngFor="let crumbData of crumbsCollection; let last = last" [ngClass]="{'active': last}">--> 
        <!--<a *ngIf="!last" (click)="navigateTo(crumbData.urlPath)" tabindex="-1">{{crumbData.displayName}}</a>--> 
        <!--<span *ngIf="last"><b>{{crumbData.displayName}}</b></span>--> 
       <!--</li>--> 
      <!--</ol>--> 
      <!--</div>--> 
      <!--<div class="col-lg-2">--> 
     <!----> 
      <!--</div>--> 
     <!--</div>--> 
    `, 
    styles: [` 
    .breadcrumb { 
     background-color: #ffffff; 
     padding: 0; 
     margin-bottom: 0; 
    } 

    .breadcrumb > li a { 
     color: inherit; 
    } 

    .breadcrumb > .active { 
     color: inherit; 
    } 
    `] 
}) 

export class BreadcrumbsComponent implements OnInit { 




    // contains home static name and dynamic current component name 
    private staticData = { 
    'title': '', 
    'homeName': 'Home' 
    }; 

    private tempTitle: string; 
    private crumbsCollection = []; 

    constructor(
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private routerStateSnap: RouterStateSnapshot, 

    private config: Config, 
    private httpPat: HTTPPatientsListService) { } 


    ngOnInit() { 
    console.log(this.activatedRoute); 
    console.log(this.routerStateSnap); 
    } 


} 


import { RouterModule } from '@angular/router'; 
@NgModule({ 
    imports: [ CommonModule, RouterModule ], 
    declarations: [ BreadcrumbsComponent ], 
    exports: [ BreadcrumbsComponent ] 
}) 

export class BreadcrumbsModule {} 

Answer 1

Die erwartete Nutzung für RouterStateSnapshot interface ist:

constructor(router: Router) { 
    const snapshot: RouterStateSnapshot = router.routerState.snapshot; 
    //... 
    } 

Es als Schnittstelle verwendet wird, nicht als Anbieter. It may be available in guards, aber das ist, weil es als Parameter in Guard-Methoden zur Verfügung gestellt wird, nicht als injizierbare (siehe CanActivate zum Beispiel).