如何在ng模板中使用make provider指令



我正在尝试将角度材质的mat-treeng-template结合使用。如果我这样做:

<ng-template #row let-node="node">{{ node.name }}</ng-template>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<div *ngTemplateOutlet="row; context:{node: node}"></div>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
<div *ngTemplateOutlet="row; context:{node: node}"></div>
</mat-tree-node>
</mat-tree>

这很好,但一旦我有了ng-template,就可以使用指令,例如matTreeNodeToggle,例如:

<ng-template #row let-node="node"><div matTreeNodeToggle>{{ node.name }}</div></ng-template>

然后我得到一个R3InjectorErrorNullInjectorError: No provider for CdkTree!

如何使组件的提供程序在ng-template的上下文中可用?

我认为问题似乎是Angular在测试环境中对mat树导入做了一些奇怪的事情。

就我的一生而言,我无法运行使用<mat-nested-tree-node>的测试。我的组件非常愚蠢:它有30行代码,有一个事件发射器,它所做的唯一事情就是在ngOnInit上创建一个监听器,在ngOnDestroy上销毁监听器,并在单击某个东西时发出(空值)。

我什么都试过了,甚至烟雾测试也不起作用。我已将模板简化为,仅<mat-nested-tree-node></mat-nested-tree-node>

当我的导入在测试中看起来像这样时:

imports: [
TranslateModule.forRoot(),
MatIconModule,
RouterTestingModule
],

我会得到ERROR: 'NG0304: 'mat-nested-tree-node' is not a known element

一旦我导入MaterialModule或MatTreeModule,我的测试将立即完全中断

NullInjectorError: R3InjectorError(DynamicTestModule)[CdkTree -> CdkTree]:
NullInjectorError: No provider for CdkTree!

尝试导入CdkTreeModule根本不会改变任何内容,并且尝试为CdkTree添加一个模拟提供程序只会导致Error: Incorrect tree structure containing detached node.

我不知道发生了什么,为什么会发生,以及测试之外的实际实现是如何工作的。

目前,我已经在测试中模拟了<mat-nested-tree-module>,在测试中创建了一个空组件并使用它,既不导入MaterialModule也不导入MatTreeModule。像这样:

@Component({
selector: 'mat-nested-tree-node',
template: ''
})
class MatNestedTreeNodeMockComponent {}
(...)
await TestBed.configureTestingModule({
declarations: [ SomeModulesNestedItemComponent, MatNestedTreeNodeMockComponent ]
})
.compileComponents();

更新:我做了更多的测试,我发现这是一个非常烦人和愚蠢的原因,为什么它不起作用(这可能也是你的问题):一旦所有东西都没有被<mat-tree>包裹起来,中间没有任何东西,事情就好像坏了。

我已经向Angular提交了一个关于这方面的错误:https://github.com/angular/angular/issues/49950

最新更新