带有 ng-template 的角 mat-tree答案

【问题标题】：Angular mat-tree with ng-template带有 ng-template 的角 mat-tree
【发布时间】：2019-02-26 21:04:29
【问题描述】：

<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 -> cdk树]： 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)

【问题讨论】：

这是一个依赖注入问题。您的组件或其父组件之一不提供 MatNestedTreeNodeis。你能发布你的组件的.ts 吗？
这段代码是经过轻微修改的材料树示例（material.angular.io/components/tree/examples），外部ts为原始未修改，容器的ts为@Input() nestedTreeControl: NestedTreeControl<FileNode>; @Input() nestedDataSource: MatTreeNestedDataSource<FileNode>; @Input() template; @Input() template2; hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
问题是当我从 ng-template 按钮中删除 matTreeNodeToggle 指令时，它工作正常
@Alex 你找到问题了吗？

标签： angular

【解决方案1】：

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

【讨论】：

非常感谢！！！你们是男人！！为我节省了数小时的调查时间！！！

【解决方案2】：

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

【讨论】：