如何将Angular组件TANavBar的Output作为TAPageContainer的Input？

要实现这个组件间的通信，核心是通过父组件作为中间层传递数据，具体步骤如下：

1. 准备父组件（宿主组件） #

你需要在同一个父组件中同时引入TANavBarComponent和TAPageContainerComponent，并创建变量存储选中的页面标识：

父组件TS代码 #

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  selectedPage: string = '1'; // 默认选中第一个页面

  onPageChange(pageName: string) {
    this.selectedPage = pageName;
  }
}

父组件模板代码 #

绑定TANavBarComponent的pageToDisplay输出事件到父组件方法，同时将selectedPage作为输入传给TAPageContainerComponent：

<ta-nav-bar (pageToDisplay)="onPageChange($event)"></ta-nav-bar>
<ta-page-container [pageToDisplay]="selectedPage"></ta-page-container>

2. 修正TAPageContainerComponent的模板语法错误 #

你的模板中[ngSwitch]={pageToDisplay}写法有误，需直接绑定变量（无需大括号）：

<div [ngSwitch]="pageToDisplay" class="ta-page-container" >
    <div *ngSwitchCase="'1'"><clone-user-settings></clone-user-settings></div>
    <div *ngSwitchCase="'2'"><transfer-deal></transfer-deal></div>
    <!-- 可选：添加默认兜底逻辑 -->
    <div *ngSwitchDefault>请选择一个页面</div>
</div>

3. 可选优化：给EventEmitter指定类型 #

为保证类型安全，建议给TANavBarComponent的EventEmitter指定字符串类型，同时简化重复代码：

export class TANavBarComponent {
  @Output() pageToDisplay = new EventEmitter<string>(); // 指定类型

  tabClick(pageName: string){
    this.pageToDisplay.emit(pageName);
    // 调试用的alert可根据需求移除
  }
}

整个流程逻辑：点击导航栏标签时，TANavBarComponent通过Output把页面标识传给父组件，父组件更新变量后，再通过Input传给TAPageContainerComponent，最终NgSwitch根据传入值加载对应子组件。

内容的提问来源于stack exchange，提问作者Rico Strydom