Angular中如何通过模板渲染多个Component类型变量

核心错误修正 #

你当前的实现思路有一个Angular开发的常见误区：不要手动通过new关键字实例化Angular组件。Angular组件的实例由框架内部的视图引擎自动创建和管理，手动new出的实例没有绑定渲染视图，也不会触发生命周期钩子，完全无法正常渲染使用。

正确实现步骤 #

1. 改造父组件，存储瓦片配置而非组件实例

你只需要在父组件存储每个瓦片需要的业务数据（比如坐标、内容、类型等），不要直接存组件实例：

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

// 按你的业务需求定义瓦片配置字段
export interface TileConfig {
  x: number;
  y: number;
  // 可自定义补充其他字段，比如瓦片内容、样式类型、状态等
}

function defaultMap() {
  let map: TileConfig[][] = [];
  for (var i = 0; i < 19; i++) {
    map[i] = [];
    for (var j = 0; j < 19; j++) {
      map[i][j] = { x: i, y: j };
    }
  }
  return map;
}

@Component({
  selector: 'app-world-viewer',
  templateUrl: './world-viewer.component.html',
  styleUrls: ['./world-viewer.component.scss']
})
export class WorldViewerComponent implements OnInit {
  tiles: TileConfig[][] = defaultMap();

  constructor() { }
  ngOnInit(): void {
  }
}

2. 改造Tile组件，接收输入属性

给TileComponent添加@Input装饰器，用来接收父组件传递的瓦片配置：

import { Component, Input } from '@angular/core';
import { TileConfig } from '../world-viewer/world-viewer.component';

@Component({
  selector: 'app-tile',
  templateUrl: './tile.component.html',
  styleUrls: ['./tile.component.scss']
})
export class TileComponent {
  @Input() tileConfig!: TileConfig;
}

你可以在Tile的模板里自由使用传入的配置，比如显示坐标：

<!-- tile.component.html -->
<div>
  坐标：{{ tileConfig.x }} - {{ tileConfig.y }}
</div>

3. 修改父组件模板，渲染Tile组件

直接在td内使用Tile的选择器app-tile，把当前遍历到的瓦片配置通过输入属性传入即可：

<table>
    <tbody>
        <tr *ngFor="let row of tiles">
            <td *ngFor="let tile of row">
                <app-tile [tileConfig]="tile"></app-tile>
            </td>
        </tr>
    </tbody>
</table>

注意事项 #

如果你使用的是Angular模块式开发，需要确保两个组件都在同一个NgModule的declarations数组中声明；如果是独立组件开发，需要在WorldViewerComponent的@Component装饰器的imports数组中导入TileComponent，否则模板会无法识别app-tile标签。

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