更改路线更改中的组件内容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