Question

我正在尝试在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作为输入。这样，您可以递归调用相同的组件，从而实现所需的结果。

Angular 2 - 模板递归不起作用

1 个答案: