TemplateRef 构造函数注入 TemplateRef 没有提供程序

Question

也许我从根本上误解了某些东西，但我试图让 TemplateRef 指向我的组件模板（在下面的简单示例中只是“Hello”）。我已将代码精简到最低限度以尝试找出问题：

import { Component, TemplateRef} from '@angular/core';
@Component({
  selector: 'app-root',
  template: `Hello`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  constructor(private tr: TemplateRef<any>) {}
}

这实际上并没有“做”任何事情，因为我已经删除了所有功能，但我希望它能起作用。当我运行这段代码时，我收到一个错误：没有 TemplateRef 的提供者，但我在 SO 和其他地方看到了示例，这显然是有效的。我缺少什么？

角度 4.2.4

谢谢。

Answer 1

我知道它已经过时了，但让我回答一下，因为过去几天我一直在努力解决同样的问题。可以通过构造函数将 TemplateRef 注入到代码中的唯一方法是当您在结构指令内工作时（带有星号 * 的指令）您会看到所有组件都是使用 View Factory 创建的，因此它们被创建为 Host View-s。即使您在标签中扭曲它们，您也无法将 TemplateRef 注入组件中。

结构指令与此不同：

<div *myDirective="1">Tesla was robbed !!!!</div>

变成这样：

<ng-template [SomeVariable]="3000">   
   <div>Tesla was robbed !!!!</div>
</ng-template>

渲染如下：

<!--bindings={
  "ng-reflect-directive-somevariable": "3000"
}-->
<div>Tesla was robbed !!!!</div>

因为它们是作为嵌入视图创建的，所以您可以注入模板。如果你仔细想想，这是有道理的。因为最初出现在 DOM 中的只是 html 注释。你必须告诉 Angular 来渲染<div>标签。你这样做：

 this.viewContainerRef.createEmbeddedView(this.templateRef);

*ngIf 就是这样工作的。如果没有结构指令的概念，您将不得不在组件内创建条件逻辑。并手动添加或删除您需要的视图。你可以用角度来做到这一点，但它更混乱。