使用HTML

Question

我的树视图有Angular 2 Component选择器：

   <navigation-bar [directories]="directories"></navigation-bar> 

列表如下所示：

<ul>
  <li class="nav-item  ">
            <a href="javascript:;" class="nav-link nav-toggle">
                <i class="fa fa-clock-o"></i>
                <span class="title">Attendance</span>
                <span class="arrow"></span>
            </a>
            <ul class="sub-menu">
                <li class="nav-item  ">
                    <a href="#" class="nav-link ">
                        <span class="title">Attendance History</span>
                    </a>
                </li>
                <li class="nav-item  ">
                    <a href="#" class="nav-link ">
                        <span class="title">Attenance Reports</span>
                    </a>
                </li>
                <li class="nav-item  ">
                    <a href="#" class="nav-link ">
                        <span class="title">Attenance Settings</span>
                    </a>
                </li>
            </ul>
        </li>
     <navigation-bar [directories]="directories"></navigation-bar> 
</ul>

组件代码如下所示：

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

    @Component({
        selector: 'navigation-bar',
        templateUrl: './app/home/navigationBarItems.component.html',

    })
    export class NavigationBarItemsComponent {
        @Input() directories: Array<Tree>;
    }

组件模板如下所示：

<li class="nav-item " *ngFor="let dir of directories">
                <a href="javascript:;" class="nav-link nav-toggle">
                    <i class="fa fa-clock-o"></i>
                    <span class="title">{{ dir.name }}</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu" *ngFor="let file of dir.child">
                    <li class="nav-item  ">
                        <a href="#" class="nav-link ">
                            <span class="title">{{file.name}}</span>
                        </a>
                    </li>
                    <navigation-bar [directories]="dir.child"></navigation-bar>
                </ul>
  </li>

由于我有带样式的树视图，因为列表中的选择器元素，视图无法正确呈现。

有什么建议吗？

编辑： 根据建议在以下地点进行更改：

Componet.html：

<li class="nav-item" navigation-bar [directories]="directories"></li>

recursivecomponent.ts：

@Component({
    selector: '[navigation-bar]',
    templateUrl: './app/home/navigationBarItems.component.html',

})

recursivecomponent.html：

<li class="nav-item " *ngFor="let dir of directories">
                <a href="javascript:;" class="nav-link nav-toggle">
                    <i class="fa fa-clock-o"></i>
                    <span class="title">{{ dir.name }}</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu" *ngFor="let file of dir.child">
                    <li class="nav-item  ">
                        <a href="#" class="nav-link ">
                            <span class="title">{{file.name}}</span>
                        </a>
                    </li>
                    <li class="nav-item" navigation-bar [directories]="dir.child"></li>
                </ul>
            </li>

输出：

<li class="nav-item" navigation-bar="" >    
            <li class="nav-item ">
                <a class="nav-link nav-toggle" href="javascript:;">
                    <i class="fa fa-clock-o"></i>
                    <span class="title">parent1</span>
                    <span class="arrow"></span>
                </a>
              </li>
</li>

我再观察一次＆＃34; li＆＃34;我的列表中的标记，这是我的树结构崩溃的原因。

Answer 1

如果您的主机已经是li元素，则无法在组件内创建一个循环来呈现那个组件的多个实例（即li元素）。

您必须重新考虑自己的方法，并使用外部的*ngFor，这意味着您的NavigationBar组件只会显示一个<li>元素。

从外面看，您可以将其用作以下内容。

<navigation-bar *ngFor="let dir of directory" [directory]="dir"></navigation-bar>

NavigationBar组件的模板应该没有ngFor循环。

<li class="nav-item">
  <!-- ... -->
</li>