Zapewnienie usług routera do najważniejszych elementów kątowe 2

Question

mam NG2 app gdzie mam app/app.module ... i rdzeń/core.module ....

w podstawowych modułów Mam kilka modułów, które wykorzystywane w aplikacja na najwyższym poziomie i tylko raz (jak w oficjalnym dokumencie), ale jeden z tych modułów wymagał modułu routera (niektóre funkcje działają z routerem).

Jednak router jest dostępny w App.module (ze wszystkimi routingami aplikacji). Mam problem - brak dostawcy dla ActivatedRouteSnapshot z core/header/header.component

Jak mogę to rozwiązać? Czy powinienem umieścić mój nagłówek z rdzenia do folderu aplikacji, czy powinienem zapewnić router dla podstawowych modułów? Dzięki.

P.S. Zaktualizuj za pomocą modułu routera. Nadal mam błąd - Brak dostawcy dla RouterStateSnapshot!

Inne interesujące rzeczy, które obsługuje standardowy router i activatedRoute. Tak więc po usunięciu RouterStateSnapshot z konstruktora (i oczywiście usunąć względny console.log), cały kod działa poprawnie. Wygląda na to, że routerModule jest dostępny i jest naprawdę dziwny.

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

oczekiwane wykorzystanie dla RouterStateSnapshot interface jest:

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

To służy jako interfejs, a nie jako dostawcy. It may be available in guards, ale to dlatego, że jest dostarczany jako parametr w metodach ochronnych, a nie jako wstrzykiwalny (patrz na przykład CanActivate).