Change component content on route changes Angular 2

问题

I wish to change the action-bar links when changing components in my router-outlet. Each component may contain its own set of action-links, but also could be empty, meaning that the action-bar would not render anything.

I've got the following ContentComponent template:

<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>

The <app-action-bar> contains the following 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>

I use the following action-bar component en service: 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;
}

In Component A I have added no links. When this component is loaded first, the action-bar is empty. Good result. Component B contains 2 links, using OnInit. The action-bar contains 2 links. Good result. Component C contains no links. The action-bar still contain 2 links, this should be empty. Bad result.

I am very new to this so I might be missing something very easy. Please help me find what it is.

回答1:

Actually in this scenario your links property is not cleared when route is updated

You probably needed an event emitter to inform action bar to update and right now your component and service have no scenario to refresh every time the route is updated. You can achieve this in two ways refresh the component when route is updated or inform the component via your actionService I'll prefer to clear the links whenever route is updated for that you should do something like this in your component

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);
  });
 }
}

this will reset your links to an empty array before getting any data from service but make sure your service don't emits data before its execution. In that case you can use service to send whole links data in one call and always clear links before storing that data into it. Goodluck

来源：https://stackoverflow.com/questions/43042965/change-component-content-on-route-changes-angular-2