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组件服务： 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

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

您可能需要一个事件发射器来通知操作栏更新，现在您的组件和服务没有每次更新路径时都要刷新的场景。您可以通过两种方式实现此目的，在路由更新时刷新组件，或通过<AutoCompleteTextView android:id="@+id/auto_complete_text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Search"/>通知组件我更喜欢在路由更新时清除链接，因为您应该在组件中执行类似的操作

actionService

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

更改路线上的组件内容更改Angular 2

1 个答案: