Question

<app-test-node [nestedDataSource]="nestedDataSource" [nestedTreeControl]="nestedTreeControl" [template]="nodetemp" [template2]="nestednodetemp">
</app-test-node>


<ng-template let-node="data" #nodetemp>
  <li class="mat-tree-node">
    <button mat-icon-button disabled></button>
    {{node.filename}}:  {{node.type}}
  </li>
</ng-template>

<ng-template let-node="data" #nestednodetemp>
  <li>
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.filename">
        <mat-icon class="mat-icon-rtl-mirror">
          {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.filename}}
    </div>
    <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </ul>
  </li>
</ng-template>

试图将树节点模板传递给以下组件：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">

  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
     <ng-container  [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{data: node}"></ng-container>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <ng-container  [ngTemplateOutlet]="template2" [ngTemplateOutletContext]="{data: node}"></ng-container>
  </mat-nested-tree-node>

</mat-tree>

问题是matTreeNodeToggle指令，当我将其添加到模板中的按钮时，出现以下错误：

错误错误：StaticInjectorError（AppModule）[MatNestedTreeNode-> CdkTree]：StaticInjectorError（平台：核心）[MatNestedTreeNode-> CdkTree]： NullInjectorError：CdkTree没有提供程序！在NullInjector.push ../ node_modules/@angular/core/fesm5/core.js.NullInjector.get （core.js：1062）在resolveToken（core.js：1300）在tryResolveToken（core.js：1244）在StaticInjector.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get （core.js：1141）在resolveToken（core.js：1300）在tryResolveToken（core.js：1244）在StaticInjector.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get （core.js：1141）在resolveNgModuleDep（core.js：8369）在NgModuleRef_.push ../ node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get （core.js：9057）在resolveDep（core.js：9422）

Answer 1

您现在可能已经解决了这个问题，但是对于遇到相同问题的其他人来说：指令不过是单击事件，该事件调用toggle（src）。这意味着您可以简单地将matTreeNodeToggle替换为(click)="treeControl.toggle(node)"。

Answer 2

尝试在组件的提供程序列表中添加CdkTree和CdkTreeNode。

带有ng-template的角度垫树

2 个答案: