Angular父子组件交互：点击表格行显示子组件详情方案咨询

要实现「仅点击表格行时才渲染子组件」的需求，咱们可以借助Angular的*ngIf指令来控制子组件的渲染状态，结合你现有的点击事件逻辑就能轻松搞定。

步骤1：给父组件加个显示控制变量 #

在父组件的类里新增一个布尔变量，用来标记是否要显示子组件，初始值设为false（页面加载时不显示）：

// 父组件TS代码
private eventsSubject: Subject<number> = new Subject<number>(); // 这里把类型改成number更严谨
showMatchMonitor = false; // 新增：控制子组件显示的开关
matchId: number;
currentState: string = 'initial';

OnSelectedMatch(id) {
 this.matchId = id;
 this.eventsSubject.next(id);
 this.currentState = 'final'; // 这里不需要切换状态，直接设为final即可
 this.showMatchMonitor = true; // 点击表格行后打开开关，显示子组件
}

步骤2：给子组件标签绑定*ngIf #

修改父组件模板里的app-match-monitor标签，加上*ngIf指令绑定刚才的控制变量，这样只有当开关打开时，子组件才会被渲染：

<!-- 修改后的父组件模板 -->
<div class="dashboard">
  <!-- 用*ngIf控制子组件仅在点击后渲染 -->
  <app-match-monitor 
    *ngIf="showMatchMonitor"
    [matchId]="matchId" 
    [events]="eventsSubject.asObservable()">
  </app-match-monitor>

  <div class="match_list_container">
    <h2>List of matches</h2>
    <table class="match_list_table">
      <!-- 表格内容保持不变 -->
      <thead>
        <tr>
          <th>Id</th>
          <th>Time</th>
          <th>Home team</th>
          <th>Away team</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let match of matches" class="choose_match" (click)="OnSelectedMatch(match.id)">
          <td>{{match.id}}</td>
          <td>{{match.date_time}}</td>
          <td>{{match.home_team.short_name}}</td>
          <td>{{match.away_team.short_name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

额外优化（可选） #

如果需要支持「点击其他行更新子组件数据」或者「点击空白处隐藏子组件」，可以补充以下逻辑：

• 点击其他行时，showMatchMonitor保持true，同时更新matchId并发送事件，子组件会通过订阅自动刷新数据
• 点击空白处隐藏：给父容器dashboard添加点击事件，判断点击目标不是表格行时，设置showMatchMonitor = false

为什么选*ngIf而不是[hidden]？ #

• *ngIf是真正的条件渲染：当条件为false时，子组件不会被创建，也不会触发ngOnInit等生命周期钩子，能节省页面资源
• [hidden]只是通过CSS隐藏元素，子组件仍然会被初始化渲染，不符合你「仅点击时才渲染」的核心需求

另外，建议把你子组件里的events类型从Observable<void>改成Observable<number>，和父组件的Subject类型保持一致，代码会更严谨：

// 子组件TS修改
@Input() events: Observable<number>;

ngOnInit(){
 this.eventsSubscription = this.events.subscribe(id => {
   this.matchId = id;
   // 后续数据请求逻辑保持不变
 })
}

这样调整后，页面初始只会显示父组件的表格，点击任意表格行后，子组件才会被渲染并展示对应行的详情数据啦～

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