Question

也许我从根本上误解了某些内容，但我试图让TemplateRef指向我的组件模板（简单地说是＆＃39; Hello＆＃39;在下面的简单示例中）。我已经将我的代码剥离到最低限度以尝试识别问题：

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

这实际上＆＃34;做＆＃34;我已经删除了所有功能，但我希望这可行。当我运行此代码时，我收到一个错误： 没有TemplateRef的提供商 ，但我在SO和其他地方看到的示例显然有效。我错过了什么？

Angular 4.2.4

感谢。

Answer 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可以这样工作。没有结构指令的概念，您将不得不在组件内部创建条件逻辑。并手动添加或删除所需的视图。您可以成角度地进行操作，但是会更麻烦。

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

1 个答案: