Изменить название страницы, используя услугу «Угловой 2 маршрутизатор»

Question

Я пытаюсь изменить название страницы с помощью службы маршрутизатора. Однако переменная всегда не получала значение от службы маршрутизатора. Может ли кто-нибудь помочь? Благодаря!

vtc.route.ts

const routes: Routes = [ 
{ 
    path: '', component: VtcComponent, children: [ 
     { path: '', redirectTo: "step1", pathMatch: "full" }, 
     { path: 'step1', component: Step1Component, data:{pageHeader: 'Step1'} }, 
     { path: 'step2', component: Step2Component, data:{pageHeader: 'Step2'} }, 
...... 
    ] 
} 

];

vtc.component.ts

export class VtcComponent implements OnInit { 
private subscription: Subscription; 
private subscription1: Subscription; 
webLinkParameter: string; 
brokerInformation: IBroker; 
authInfo: IAuth; 
pageHeader: string; 
constructor(private dataService: VtcDataService, private brokerService: BrokerService, private activatedRoute: ActivatedRoute, private authService: AuthService) { } 

ngOnInit() { 
    this.subscription = this.activatedRoute.queryParams.subscribe(
     (param: any) => { 
      this.webLinkParameter = param['brokerid']; 
     }); 

    //This is the part that the variable trying to get value from router service 
    this.subscription1 = this.activatedRoute.data.subscribe(res => {this.pageHeader = res['pageHeader']}); 

    console.log("pageHeader: " + this.pageHeader); 
.... 
} 

Переменная PageHeader всегда показывает «не определено» в консоли вывода, что означает, что он не получил никакого значения от маршрутизатора службы на всех. Я что-то пропустил? Благодаря!

Answer 1

Данные хранятся на компоненте, прикрепленном к маршруту. Таким образом, родительский маршрут, который загружает VtcComponent, не имеет доступа к данным, переданным в дочерний маршрут, если вы не используете firstChild property, который обращается к первому ребенку в дереве маршрутов. Такие как:

this.subscription1 = this.activatedRoute.firstChild.data.subscribe(d => this.pageHeader = d['pageHeader'])