获取递归嵌套模板调用以在 Angular 2 中工作？答案

【问题标题】：Get recursive nested template call to work in Angular 2?获取递归嵌套模板调用以在 Angular 2 中工作？
【发布时间】：2016-07-21 00:22:42
【问题描述】：

我希望标题不会误导太多，因为我不知道该怎么称呼它，但问题是：

我正在使用 Angular 2 开发一个应用程序，并在多个实例中使用嵌套模板（希望这是正确的名称）。现在我遇到的问题是我的应用程序包含几个可以包含其他小部件的“小部件”。这可以在模板调用中创建一种圆圈。

例子：

home.html:

<div> some html stuff </div>
<widget1 *ng-for="#widget of widgetList" [widget]="widget"></widget1>

widget1.html：

<div> some html stuff unique to widget1 </div>
<div *ng-if="widget.widgetSubList">
  <div *ng-for="#widget of widget.widgetSubList">
    <div [ng-switch]="widget.type">
      <p *ng-switch-when="2"><widget2 [widget]="widget"></></widget2></p>
      <p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p>
    </div>
  </div>
</div>

widget2.html

<div> some html stuff unique to widget2 </div>
<div *ng-if="widget.widgetSubList">
  <div *ng-for="#widget of widget.widgetSubList">
    <div [ng-switch]="widget.type">
      <p *ng-switch-when="1"><widget1 [widget]="widget"></></widget1></p>
      <p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p>
    </div>
  </div>
</div>

widgetSubList 是小部件的一个属性，如果它有子小部件则被填充，ng-if 在这种情况下确实有效，并且如果没有子小部件则不会使代码崩溃。

这就是整个事情崩溃的地方，因为它创建了提到的小部件“圆圈”，其中包含已经在树的上述部分中的小部件，因为小部件 1 可以调用小部件 2，小部件 2 可以再次调用小部件 1。我无法更改该结构，因为它是由我在本例中使用的 API 预先确定的。

那么现在的问题是：有没有办法完成这项工作？

由于所有小部件都需要不同的实现，如果不创建一个充满 ng-ifs 的巨大 html 文件，我就无法真正解决它，我想避免这种情况。

PS：我进一步编辑了示例以更好地表示代码。 @Input 部分存在于 .ts 文件中。

目前，我只从 API 中读出了一层额外的子小部件用于测试目的。

【问题讨论】：

一些具体的错误信息？
我的 home.html 中有一个 ng-for 调用，有点像这样：*ng-for="#widget of widgetList"。所有错误告诉我的是它不能调用未定义或 Nullreference 的属性“forEach”。所以我的猜测是“圆圈”调用中断，因此它搞砸了 ng-for。
能否创建一个允许复制的 plunker？
我可以尝试，但完全复制它可能会有点复杂。我现在也不能这样做，但如果需要，我会尽快处理。

标签： html templates typescript angular angular-directive

【解决方案1】：

有点奇怪的是widget1.html 和widget2.html 文件中没有小部件循环。使用您的实现，您始终保持在相同的小部件元数据上，因此您有一个无限循环是正常的......

事实上，你需要有一个递归结构来定义你的组件的结构：

widgetList
  widget
    children
      widget
        children
      widget
        children
  widget
    children
      widget
        children
  (...)

所以当当前小部件没有子部件时，递归循环将结束。

所以我会像这样重构你的模板（例如widget1.html）：

<div> some html stuff unique to widget1 </div>
<div *ng-for="#subWidget of widget.children">
  <div [ng-switch]="subWidget.type">
    <p *ng-switch-when="2"><widget2 [widget]="subWidget"></widget2></p>
    <p *ng-switch-when="3"><widget3 [widget]="subWidget"></widget3</p>
  </div>
</div>

每个小部件都有一个对应于小部件元数据的输入：

@Component({
  selector: 'widget1',
  (...)
})
export class Widget1Component {
  @Input()
  widget: any;
}

【讨论】：