如何獲取數據路由器插座組件到HeaderComponent？

Question

我已經要求在HeaderComponent的route-outlet組件中有一些數據。

請檢查我的下圖。

Answer 1

您可以從共享服務隊發出事件和訂閱此事件在喜歡你的頭組件：在當前的路線組件

：

onEvent() { 
    this.sharedService.changeTitle(newTitle); 
} 

服務：

titleChanged = new EventEmitter(); 

changeTitle(title) { 
    this.titleChanged.emit(title); 
} 

in hea DER組件：

title: string = ''; 
ngOnInit(){ 
    this.sharedService.titleChanged.subscribe(title => this.title = title); 
} 

Answer 2

1）admin.service.ts

import {Injectable, EventEmitter} from "@angular/core"; 

@Injectable() 
export class AdminService { 
    titleChanged = new EventEmitter(); 

    constructor() {} 

    changeTitle(title) { 
     this.titleChanged.emit(title); 
    } 
} 

2）app.component.ts

import { Component } from '@angular/core'; 
import {ActivatedRoute} from '@angular/router'; 
import { AdminService } from '../common/service/admin.service'; 

@Component({ 
    selector: 'app-admin', 
    //providers: [AdminService], 
    template: ` 
    <left-menu></left-menu> 
    <div class="main-panel"> 
     <app-header [header_title]="_header_title"></app-header> 
     <div class="content"> 
      <div class="container-fluid"> 
      <div class="row"> 
       <router-outlet></router-outlet> 
      </div> 
      </div> 
     </div> 
    <app-footer></app-footer> 
    </div> 

    ` 
}) 
export class AdminComponent { 

    public _header_title:string = ""; 
    constructor(route: ActivatedRoute,private _admin: AdminService) { 
     this._admin.titleChanged.subscribe(title => this._header_title = title); 
    } 
} 

3）用戶profile.component .ts

import { Component } from '@angular/core'; 
import { AdminService } from '../common/service/admin.service'; 

@Component({ 
    selector: 'user-profile', 
    templateUrl : `./app/user-profile/user-profile.component.html` 
}) 
export class UserProfileComponent { 
    private username:string="Bharat Chauhan"; 
    constructor(private _admin: AdminService) { 
     this._admin.changeTitle("User Profile"); 
    } 
}