Angular4中如何基于父组件值动态切换组件视图

我来帮你搞定这个Angular组件视图切换的问题！根据你描述的组件层级（app-component → app-common → app-grid），核心思路是通过组件间通信传递父组件的状态，然后在子组件中根据这个状态条件渲染不同视图。下面是具体的实现步骤和代码示例：

1. 父组件（app-component）定义视图控制变量并传递给子组件 #

首先在最外层的app-component中定义控制视图切换的变量，然后通过@Input()把这个变量传递给子组件app-common：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  template: `
    <!-- 切换视图的按钮 -->
    <div class="view-controls">
      <button (click)="activeView = 'grid'" [class.active]="activeView === 'grid'">Grid视图</button>
      <button (click)="activeView = 'list'" [class.active]="activeView === 'list'">List视图</button>
    </div>

    <!-- 传递视图状态给app-common -->
    <app-common [activeView]="activeView"></app-common>
  `,
  styles: [`
    .view-controls button.active { background: #007bff; color: white; }
  `]
})
export class AppComponent {
  activeView: string = 'grid'; // 默认显示Grid视图
}

2. 中间组件（app-common）接收状态并传递给下级组件 #

在app-common中通过@Input()接收父组件传来的视图状态，同时可以把这个状态继续传递给它的子组件app-grid，或者直接在自身模板中做视图切换：

// common.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-common',
  templateUrl: './common.html'
})
export class CommonComponent {
  @Input() activeView!: string; // 接收父组件的视图状态
  dropdownData: any[] = []; // 你的下拉数据，这里假设已初始化
}

3. 在common.html中根据状态切换视图 #

结合你提到的*ngFor循环的accordion结构，我们可以用*ngIf或者[ngSwitch]来实现条件渲染：

方案一：用[ngSwitch]切换不同组件视图 #

适合有多种视图类型切换的场景：

<!-- common.html -->
<div class="accordion col-sm-12" id="accordion1" *ngFor="let data of dropdownData">
  <div class="card">
    <div class="card-header" id="heading{{data.id}}">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{data.id}}">
          {{data.title}}
        </button>
      </h5>
    </div>

    <div id="collapse{{data.id}}" class="collapse show" aria-labelledby="heading{{data.id}}" data-parent="#accordion1">
      <div class="card-body">
        <!-- 根据activeView切换不同视图组件 -->
        <div [ngSwitch]="activeView">
          <!-- 显示Grid视图 -->
          <app-grid *ngSwitchCase="'grid'" [itemData]="data"></app-grid>
          
          <!-- 显示List视图 -->
          <app-list *ngSwitchCase="'list'" [itemData]="data"></app-list>
          
          <!-- 默认 fallback 视图 -->
          <div *ngSwitchDefault>
            请选择有效的视图类型
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

方案二：用*ngIf控制单个组件的显示/隐藏 #

如果只是需要控制app-grid的显示和其他内容的切换，用*ngIf更简洁：

<!-- common.html -->
<div class="accordion col-sm-12" id="accordion1" *ngFor="let data of dropdownData">
  <div class="card">
    <!-- 省略accordion头部代码 -->
    <div class="card-body">
      <!-- 当activeView为grid时显示app-grid -->
      <app-grid *ngIf="activeView === 'grid'" [itemData]="data"></app-grid>
      
      <!-- 当activeView为detail时显示详情内容 -->
      <div *ngIf="activeView === 'detail'">
        <h4>{{data.detailTitle}}</h4>
        <p>{{data.detailContent}}</p>
      </div>
    </div>
  </div>
</div>

4. 子组件（app-grid）接收数据（可选） #

如果app-grid需要根据父组件传递的数据渲染内容，同样用@Input()接收：

// grid.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-grid',
  template: `
    <div class="grid-container">
      <div class="grid-item" *ngFor="let item of itemData.items">
        {{item.name}}
      </div>
    </div>
  `
})
export class GridComponent {
  @Input() itemData!: any; // 接收app-common传递的数据
}

额外：子组件触发视图切换（反向通信） #

如果需要从app-grid内部触发视图切换（比如点击某个按钮切换到List视图），可以用@Output()事件发射器把状态传递回父组件：

// grid.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-grid',
  template: `
    <!-- 省略grid内容 -->
    <button (click)="switchToList()">切换到List视图</button>
  `
})
export class GridComponent {
  @Input() itemData!: any;
  @Output() viewSwitch = new EventEmitter<string>();

  switchToList() {
    this.viewSwitch.emit('list'); // 发送切换请求到父组件
  }
}

然后在common.html中监听这个事件，并传递给最外层的app-component：

<app-grid *ngSwitchCase="'grid'" [itemData]="data" (viewSwitch)="onViewSwitch($event)"></app-grid>

// common.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-common',
  templateUrl: './common.html'
})
export class CommonComponent {
  @Input() activeView!: string;
  @Output() viewSwitch = new EventEmitter<string>(); // 传递事件到父组件
  dropdownData: any[] = [];

  onViewSwitch(viewType: string) {
    this.viewSwitch.emit(viewType);
  }
}

最后在app-component中接收事件并更新视图状态：

<app-common [activeView]="activeView" (viewSwitch)="activeView = $event"></app-common>

这样整个组件间的视图切换逻辑就闭环了，完全基于父组件的状态来控制各层级组件的视图显示。

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