更改路線更改中的組件內容Angular 2

Question

我希望在更改路由器插座中的組件時更改動作欄鏈接。每個組件可能包含自己的一組動作鏈接，但也可能是空的，這意味着動作欄不會呈現任何內容。

我有以下ContentComponent模板：

<app-header></app-header> 
<div class="page-container"> 
    <app-sidebar-left></app-sidebar-left> 
    <div class="page-content-wrapper"> 
     <div class="page-content"> 
      <h1 class="page-title"> Product Builder 
       <small>Dashboard</small> 
      </h1> 
      <div class="page-bar"> 
       <ul class="page-breadcrumb"> 
        <li> 
         <i class="icon-home"></i> 
         <span>Dashboard</span> 
        </li> 
       </ul> 
       <app-action-bar></app-action-bar> 
      </div> 

      <router-outlet></router-outlet> 

     </div> 
    </div> 
</div> 

的<app-action-bar>包含以下HTML：

<div *ngIf="links.length" class="page-toolbar"> 
    <div class="btn-group pull-right"> 
     <button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" 
       data-hover="dropdown" data-delay="1000" data-close-others="true" aria-expanded="true"> Actions 
      <i class="fa fa-angle-down"></i> 
     </button> 
     <ul class="dropdown-menu pull-right" role="menu"> 

      <li *ngFor="let link of links"> 
       <a [routerLink]="[link.url]">{{ link.text}}</a> 
      </li> 
     </ul> 
    </div> 
</div> 

我用下面的操作杆組件連接服務： action-bar.component.ts

import {Component} from "@angular/core"; 
import {ActionService} from "../../../services/application/action.service"; 

@Component({ 
    selector: 'app-action-bar', 
    templateUrl: './action-bar.component.html', 
    styleUrls: ['./action-bar.component.scss'] 
}) 
export class ActionBarComponent { 
    private links = []; 

    constructor(private actionService: ActionService) { 
     this.actionService.getLinks().subscribe(link => { 
      this.links.push(link); 
     }); 
    } 
} 

action.service.ts

import {Injectable} from "@angular/core"; 
import {Subject} from "rxjs/Subject"; 
import {Observable} from "rxjs"; 
import {ILink} from "../../interfaces/linkinterface"; 

@Injectable() 
export class ActionService { 
    private links = new Subject<ILink>(); 

    addLink(linkText: string, url: string) { 
     this.links.next({text: linkText, url: url}); 
    } 

    purgeLinks() { 
     this.links = new Subject<ILink>(); 
    } 

    getLinks(): Observable<any> { 
     return this.links.asObservable(); 
    } 
} 

linkinterface.ts

export interface ILink { 
    text: string; 
    url: string; 
} 

在A組份我已經添加任何鏈接。當這個組件首先被加載時，動作欄是空的。好結果。 組件B包含2個鏈接，使用OnInit。操作欄包含2個鏈接。好結果。 組件C不包含鏈接。操作欄仍然包含2個鏈接，這應該是空的。結果不好。

我對此很新，所以我可能會錯過一些非常簡單的東西。請幫我看看它是什麼。

Answer 1

其實在這種情況下，當路由更新

你可能需要一個事件發射器，通知操作欄更新和現在您的組件和服務有沒有場景刷新，每次的路線你的鏈接屬性沒有被清除已更新。您可以通過以下兩種方式刷新組件時，路由更新，或通過您actionService，我會更喜歡以清除每當路由更新的鏈接，你應該做這樣的事情在你的組件通知組件實現這個

import {Component} from "@angular/core"; 
import { Router, NavigationStart } from "@angular/router"; 
import {ActionService} from "../../../services/application/action.service"; 

@Component({ 
selector: 'app-action-bar', 
templateUrl: './action-bar.component.html', 
styleUrls: ['./action-bar.component.scss'] 
}) 
export class ActionBarComponent { 
private links = []; 

constructor(private actionService: ActionService, private router: Router) { 
    this.router.events.subscribe((evt) => { 
    if (evt instanceof NavigationStart) { 
    this.links = []; 
    } 
    }); 
    this.actionService.getLinks().subscribe(link => { 
    this.links.push(link); 
    }); 
} 
} 

這會在從服務獲取任何數據之前將您的鏈接重置爲空數組，但要確保您的服務在執行前不會發出數據。在這種情況下，您可以使用服務在一次調用中發送整個鏈接數據，並始終在將數據存儲到其中之前清除鏈接。 Goodluck