Angular 4/5 Observable - 如何根据可观察属性更新组件模板？

Question

好吧，我还是个新手。我已经成功创建了一个“仪表板”组件，它有一个带有链接的左侧边栏。右侧是显示内容/组件的位置，我希望根据在左侧边栏上单击的链接动态更改这些内容/组件（请参阅此处仪表板外观的引导示例，单击切换按钮以查看侧边栏：@ 987654321@).

我创建了一个具有 Subject 和 Observable 的 DashboardService 以允许同级组件通信。这很好用，因为我有一个显示此通信工作的 console.log()（当我单击 SidebarComponent 中侧边栏上的链接时，我 console.log() 是由 SidebarComponent 监听的 DashboardService “发出”的值兄弟，DashboardSectionComponent)。

我遇到的问题是 DashboardSectionComponent 中的模板仅在页面初始加载时加载正确的组件部分 - 一旦我单击侧栏上的链接，内容为空白并且没有呈现任何内容。

这是允许组件通信的服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DashboardService {

    private selectedComponentAlias = new Subject<string>();

    constructor() {}

    setSelectedComponentAlias(alias: string) {
        this.selectedComponentAlias.next(alias);
    }

    getSelectedComponentAlias(): Observable<string> {
        return this.selectedComponentAlias.asObservable();
    }

}

这里是 SidebarComponent：

import { Component, OnInit } from '@angular/core';

import { DashboardService } from '../dashboard.service';

@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

    constructor(private dashboardService: DashboardService) { }

    ngOnInit() {
    }

    onShowSection(event) {
        event.preventDefault();
        const componentAlias = event.target.getAttribute('data-componentAlias');
        this.dashboardService.setSelectedComponentAlias(componentAlias);
    }

}

这里是 DashboardSectionComponent（订阅 observable 的组件，我想根据捕获的值设置控制模板视图的属性）

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { DashboardService } from '../dashboard.service';

@Component({
    selector: 'app-dashboard-section',
    templateUrl: './dashboard-section.component.html',
    styleUrls: ['./dashboard-section.component.css']
})
export class DashboardSectionComponent implements OnInit, OnDestroy {

    private subscrition: Subscription;
    selectedComponentAlias: string = 'user-profile';

    constructor(private dashboardService: DashboardService) {

    }

    ngOnInit() {
        this.subscrition = this.dashboardService.getSelectedComponentAlias()
            .subscribe((selectedComponentAlias: string) => {
                this.selectedComponentAlias = selectedComponentAlias;
                console.log('user clicked: ',this.selectedComponentAlias);
            });
    }

    ngOnDestroy() {
        this.subscrition.unsubscribe();
    }

}

最后是 DashboardSectionComponent 的模板，它可能有错误的语法：

<div *ngIf="selectedComponentAlias == 'my-cards'">
    <app-cards></app-cards>
</div>

<div *ngIf="selectedComponentAlias == 'user-profile'">
    <app-user-profile></app-user-profile>
</div>

<div *ngIf="selectedComponentAlias == 'user-settings'">
    <app-user-settings></app-user-settings>
</div>

同样，这很好用（默认情况下，在页面加载时，selectedComponentAlias 是“用户配置文件”）。但是点击侧边栏链接后它会变成空白......

谢谢。

Answer 1

这很简单——就像@RandyCasburn 指出的那样，这是让路由正常工作的问题。