Angular 4/5：如何基于Observable属性更新Dashboard组件模板？

嘿，作为Angular新手能搞出带侧边栏的Dashboard已经超棒啦！我来一步步帮你搞定动态切换右侧内容的事儿～

第一步：先确认你的DashboardService结构（如果还没调整，建议改成这样） #

既然你已经用了Subject和Observable，推荐用BehaviorSubject（它会保存当前最新值，新订阅的组件也能直接拿到初始值），服务代码大概是这样：

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

@Injectable({ providedIn: 'root' })
export class DashboardService {
  // 用字符串存当前选中的页面标识（比如组件的key），初始值设为默认显示的页面
  private currentPageSubject = new BehaviorSubject<string>('home');
  // 对外暴露Observable，避免外部直接修改Subject的值
  currentPage$: Observable<string> = this.currentPageSubject.asObservable();

  // 供侧边栏调用的切换方法
  switchPage(pageKey: string) {
    this.currentPageSubject.next(pageKey);
  }
}

第二步：侧边栏组件绑定点击事件，通知服务切换页面 #

在你的侧边栏模板里，给每个链接加点击事件，调用服务的switchPage方法：

<div class="sidebar">
  <a (click)="selectPage('home')" class="sidebar-link">首页</a>
  <a (click)="selectPage('profile')" class="sidebar-link">用户信息</a>
  <a (click)="selectPage('settings')" class="sidebar-link">设置</a>
</div>

然后在侧边栏组件类里注入服务，实现点击逻辑：

import { Component } from '@angular/core';
import { DashboardService } from '../dashboard.service';

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

  selectPage(pageKey: string) {
    this.dashboardService.switchPage(pageKey);
  }
}

第三步：Dashboard主组件用Observable动态切换内容（核心步骤！） #

这里推荐用Angular的async管道，它会自动帮你订阅/取消订阅Observable，完全不用手动处理内存泄漏，对新手太友好了！

在Dashboard主组件的模板里，通过async管道订阅currentPage$，然后用*ngIf判断显示对应组件：

<div class="dashboard-container">
  <app-sidebar></app-sidebar>
  <div class="content-area">
    <!-- 用async管道拿到当前选中的页面key，匹配对应组件 -->
    <app-home *ngIf="(currentPage$ | async) === 'home'"></app-home>
    <app-user-profile *ngIf="(currentPage$ | async) === 'profile'"></app-user-profile>
    <app-settings *ngIf="(currentPage$ | async) === 'settings'"></app-settings>
  </div>
</div>

然后在主组件类里，把服务的Observable赋值给组件属性：

import { Component } from '@angular/core';
import { DashboardService } from './dashboard.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  currentPage$: Observable<string>;

  constructor(private dashboardService: DashboardService) {
    // 直接拿到服务里的Observable
    this.currentPage$ = this.dashboardService.currentPage$;
  }
}

额外小提示（进阶选项） #

如果你的项目以后会扩展成大型应用，也可以结合Angular路由来实现：侧边栏用routerLink跳转到子路由，主组件里用<router-outlet>自动渲染对应组件，这种方式更适合复杂的页面导航逻辑。

内容的提问来源于stack exchange，提问作者Pippy Longstocking