在路线更改时更改组件内容Angular 2 [英] 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.

我有以下内容 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

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

在组件A中，我没有添加任何链接。第一次加载此组件时，操作栏为空。好结果。
组件B使用OnInit包含2个链接。动作栏包含2个链接。好结果。
组件C不包含任何链接。动作栏仍包含2个链接，应为空。不好的结果。

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.

推荐答案

实际上，在这种情况下，更新路由时不会清除链接属性

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

您可能需要一个事件发射器来通知操作栏进行更新，现在，每次更新路由时，您的组件和服务都无法刷新。您可以通过两种方式实现这一点，即在更新路由时刷新组件，或者通过 actionService 通知组件，我宁愿在路由更新时清除链接，因为您应该在您的组件中执行类似的操作

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

这会将您的链接重置为空数组，然后再获取服务中的任何数据，但请确保您的服务在执行之前不发出数据。在这种情况下，您可以使用service在一个调用中发送整个链接数据，并始终清除链接，然后再将该数据存储到其中。好运

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

这篇关于在路线更改时更改组件内容Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！