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

【问题标题】：TemplateRef constructor injection No provider for TemplateRefTemplateRef 构造函数注入 TemplateRef 没有提供程序
【发布时间】：2018-05-01 15:25:21
【问题描述】：

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

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>) {}
}

这实际上并没有“做”任何事情，因为我已经删除了所有功能，但我希望它能够工作。当我运行此代码时，我收到一个错误：No provider for TemplateRef 但我在 SO 和其他地方看到了这显然有效的示例。我错过了什么？

Angular 4.2.4

谢谢。

【问题讨论】：

好的，谢谢，但不是很有帮助...您觉得我错过了任何指向信息的链接吗？

标签： angular

【解决方案1】：

我知道它已经过时了，但让我回答一下，因为过去几天我一直在为同样的问题苦苦挣扎。通过构造函数将 TemplateRef 注入代码的唯一方法是在 structural 指令（带有星号 * 的指令）中工作。您会看到所有组件都是使用 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 就是这样工作的。如果没有结构指令的概念，您将不得不在组件内创建条件逻辑。并手动添加或删除您需要的视图。你可以用角度来做到这一点，但它更混乱。

【讨论】：