는 각도 핵심 구성 요소에 대한 라우터 서비스 제공이

Question

내가 앱/app.module ... 그리고 코어/core.module이 NG2 응용 프로그램을 가지고 .... 핵심 모듈에

나는에서 사용되는 몇 가지 모듈이 응용 프로그램 최상위 및 단 한 번 (공식 문서에서와 같은)하지만 그 모듈 중 하나는 라우터 모듈이 필요합니다 (일부 기능은 라우터와 함께 작동).

하지만 라우터는 App.module (모든 앱 라우팅 사용)에서 제공됩니다. 문제가 발생했습니다. core/header/header.component의 ActivatedRouteSnapshot 공급자가 없습니다.

어떻게 해결할 수 있습니까? 내 헤더를 코어에서 앱 폴더로 옮겨야합니까? 아니면 코어 모듈 용 라우터를 제공해야합니까? 감사.

P. 라우터 모듈로 업데이트하십시오. 아직 오류가 있습니다 - RouterStateSnapshot에 대한 공급자가 없습니다!

표준 라우터와 activatedRoute가 작동하는 다른 흥미로운 점. 그래서 RouterStateSnapshot을 생성자에서 제거하고 (물론 상대적인 console.log를 제거하십시오.) 모든 코드가 정상적으로 작동합니다. routerModule을 사용할 수 있으며 정말 이상하게 보입니다.

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

RouterStateSnapshot interface의 예상 사용법은 : 그것은 공급자와 같은 인터페이스로 사용되는

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

. It may be available in guards이지만 이것이 가드 방법의 매개 변수로 제공되고 주사제는 제공되지 않기 때문입니다 (예 : CanActivate 참조).