Question

我有一个Angular 2的设置，其中home.html有一个 <widgetcontainer></widgetcontainer>调用，后者又调用某些小部件模板。然而，那些小部件模板需要再次调用widgetcontainer，以便也可以显示它们的子小部件。

看起来有点像这样：

home.html的：

<div> home site specific content </div>
<ul>
  <widgetcontainer *ng-for="#widget of widgetList" [containerwidget]="widget"></widgetcontainer>
</ul>

widgetcontainer.html：

<li>
  <div [ng-switch]="containerwidget.type">
    <p *ng-switch-when="1"><widget1 [widget]="containerwidget"></widget1></p>
    <p *ng-switch-when="2"><widget2 [widget]="containerwidget"></widget2></p>
    <p *ng-switch-default>Error in widget-data</p>
  </div>
</li>

现在widget1和widget2几乎完全相同，除了第一部分内容：

<div> widget 1 or 2 specific content </div>
<div *ng-if="widget.widgetSubList">
  <div class="widget-sub-listing" *ng-for="#widget of widgetlocal.widgetSubList">
    <widgetcontainer *ng-for="#widget of widgetlocal.widgetSubList" [containerwidget]="widget"></widgetcontainer>
  </div> 
</div>

我需要这样做的原因是widget1可以包含一系列widget2（和其他），而widget2又可以包含widget1。

每个小部件的.ts对应部分包含所需的@Input部分，因此如果我省略对widgetcontainer的调用，它确实可以正常工作，但当然不能再显示子小部件。读取子窗口小部件也可以使用console.logs进行测试。

我发现类似这样的类似问题：How do I inject a parent component into a child component? 从我收集到的地方，通过导入Input和forwardRef并使用

解决问题

constructor( @Inject(forwardRef(() => widgetcontainer)) private _parent: widgetcontainer) { }

在孩子们中，在我的情况下，小部件1和2.我也试过了，但我仍然收到错误。将widgetcontainer导入widget.ts文件可以正常工作，将其添加到指令或将<widgetcontainer></widgetcontainer>调用添加到widget1或2的html中会破坏程序并向我抛出错误消息：

EXCEPTION：TypeError：Die Eigenschaft＆＃34; length＆＃34; eines undefinierten oder Nullverweises kann nicht abgerufen werden。在[null]

作为一个小翻译尝试：它基本上说

财产＆＃34;长度＆＃34;无法调用未定义或空引用。在[null]

我无法确定错误的位置。考虑到它可以在不添加widgetcontainer到widget1或2中的指令的情况下工作，我猜这就是整个事情破坏的地方。

之前我有一个类似的错误，但是它代表length声称调用forEach失败了，但现在我无法复制错误。

从我一直在阅读的问题是<widgetcontainer></widgetcontainer>模板的循环引用/调用。它应该可以使它工作，虽然它需要一个停止条件不转变为无限循环。因此，我的widget1和2中已经有*ng-if条件，已经使用子列表ID的简单列表进行了测试，并且作为一个条件工作得很好。

现在的问题是我在哪里错了？或者如何让循环呼叫工作？

递归/循环模板调用

0 个答案: