角2 - 不工作

Question

我试图做一个TreeView在我component.html模板递归这是我的代码：

<div *ngFor="let item of menusList"> 
    <div class="containerMenu"> 
     <span [ngClass]="{collapseTitle:item.SubItems.length}"> 
      <i [ngClass]="item.SubItems.length ? 'fa fa-angle-down' : ''"></i> 
      <span style="display:inline-block"> 
       <span>{{item.Title.Traductions.French}}</span> 
      </span> 
     </span> 
     <div *ngIf="item.SubItems.length" ng-include="'menu'" class="collapsePanel"></div> 
    </div> 
</div> 

    <!--Submenu Template + Récursive--> 
    <ng-template #menu> 
     <ul> 
      <li *ngFor="let item of item.SubItems"> 
       <span ng-if="!item.Url" ng-class="{collapseTitle:item.SubItems.length}"> 
        <i ng-class="item.SubItems.length ? 'fa fa-angle-down' : ''"></i> 
        <span ng-class="item.SubItems.length ? 'subItemsTitle' : ''"> 
         <span style="display:inline-block"> 
          <span>{{item.Title.Traductions.French}}</span> 
         </span> 
        </span> 
       </span> 

       <a target="_blank" href="{{item.Url}}" ng-if="item.Url"> 
        <span ng-class="item.SubItems.length ? 'collapseTitle' : ''"> 
         <i ng-class="item.SubItems.length ? 'fa fa-angle-down' : ''"></i> 
         <span ng-class="item.SubItems.length ? 'subItemsTitle' : ''"> 
          <span style="display:inline-block"> 
           <span>{{item.Title.Traductions.French}}</span> 
          </span> 
         </span> 
        </span> 
       </a> 

       <div *ngIf="item.SubItems.length" ng-include="'menu.html'" class="collapsePanel"></div> 
      </li> 
     </ul> 
    </ng-template> 

所以，我的第一个div交我所有的阵列（menusList），如果当前位置有子项，它应该包含模板＃菜单。这是在AngularJS中工作，但我想在Angular2中完成。

我没有错误在我的控制台，我想我的问题是ng-include

感谢您的帮助。

Answer 1

根据此问题＃2753中的comment，在Angular 2+中不支持ng-include。

但是，您可以将您的ng-template包装到另一个组件中，并将SubItems作为输入。这样你可以递归调用同一个组件，达到理想的效果。