更改路由更改的组件内容Angular 2

Posted 2023-02-23

【中文标题】更改路由更改的组件内容Angular 2

【英文标题】：Change component content on route changes Angular 2

【发布时间】：2017-08-19 22:58:49

【问题描述】：

我希望在更改路由器插座中的组件时更改操作栏链接。每个组件可以包含自己的一组动作链接，但也可以是空的，这意味着动作栏不会呈现任何内容。

我有以下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 个链接，这应该是空的。结果不好。

我对此很陌生，所以我可能会遗漏一些非常容易的东西。请帮我找出它是什么。

【问题讨论】：

请分享组件 A、B 和 C 的代码。我是您没有从组件 C 获取事件，ActionBarComponent 可以侦听该事件，组件仍显示来自组件 B 的 2 个链接。

还可以尝试在 ActionBarComponent 构造函数中更改以下代码： this.actionService.getLinks().subscribe(link => this.links.length = 0; this.links.push(link); ) ;

感谢您的回复。组件 A 和 C 的代码什么都不是，只需渲染一个视图就足够了。组件 B 包含一个 OnInit 和以下 this.actionService.addLink('Element toevoegen', '/elements/add'); 这负责将链接传输到 ActionBar。

【参考方案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);
  );
 

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

【讨论】：

感谢您的回复。提供的解决方案不起作用，因为在加载包含链接的组件后，它将再次添加和删除。将事件类型从 NavigationEnd 更改为 NavigationStart 解决了这个问题。如果您更新答案以匹配事件类型，我将批准您的解决方案。

这只是完成任务的假设，顺便说一句，答案已更新