angular - TemplateRef 构造函数注入(inject)没有 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>) {}
}

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

Angular 4.2.4

谢谢。

Answer 1

我知道它已经过时了，但让我来回答一下吧，因为在过去的几天里我一直在为同样的问题而苦苦挣扎。通过构造函数将 TemplateRef 注入(inject)代码的唯一方法是在 structural 指令(带星号 * 的指令)内部工作时。您会看到所有组件都是使用 View Factory 创建的，因此它们被创建为 Host View-s。即使您将它们扭曲到标签中，您也无法将 TemplateRef 注入(inject)到组件中。

结构指令与此不同:

<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>

并且因为它们是作为嵌入式 View 创建的，所以您可以注入(inject)模板。如果你考虑一下，这是有道理的。因为最初出现在 DOM 中的只是那个 html 注释。你必须告诉 Angular 渲染 <div>标签。然后你这样做:

 this.viewContainerRef.createEmbeddedView(this.templateRef);

*ngIf 就是这样工作的。如果没有结构指令的概念，您将不得不在组件内部创建条件逻辑。并手动添加或删除您需要的 View 。你可以用 Angular 来做，但它更困惑。