Question

组件HTML：

<ng-template #content/> </ng-template>

组件TS：

@ViewChild('content')
public content: TemplateRef;

Visual Studio消息：

[ts] Generic type 'TemplateRef<C>' requires 1 type argument(s)

我应该做到TemplateRef<any>吗？代码示例似乎永远不会指定泛型。 这是新的吗？

Answer 1

在Angular Material 2中，他们使用了

TemplateRef<any>

到处 https://github.com/angular/material2/search?utf8=%E2%9C%93&q=templateref&type=

我还没有看到任何与此类型参数相关的内容。

Answer 2

您可以使用TempalteRef<any>，并且在几乎所有用例中都可以。

但是，如果您想了解更多信息，可以阅读this blog post （特别是“ Angular的动态范围” 部分），由Minko Gechev。

Answer 3

基于Nexaddo的帖子，我将在这里详细说明。给定一个组件：

    @Component({
      selector: 'app-modal',
      templateUrl: './my.component.html',
      styleUrls: ['./my.component.css']
    })
    export class MyComponent implements OnInit {
      data = "oldData";
      @ViewChild() template0:TemplateRef<any>;
      constructor() { }
    
      ngOnInit() {
      }
    
    }

TempalteRef顾名思义是模板引用。 @ViewChild()只是在说“模板在我看来”，如果您将模板从调用传递到MyComponent，则可以使用@ContentChild()或@Input()。

在组件模板（此处为 ./ my.component.html ）中进行召唤时，大多数情况下会这样做：

    <ng-template #template0>
        <p>Lorem Ipsum...</p>
        <p>{{data}}</p>
        <p>Lorem Ipsum...</p>
    </ng-template>
    <ng-container *ngTemplateOutlet="template0">
        
    </ng-container>

在这里，对 template0 的调用将从组件上下文中插值 data ，因为其中的所有模板共享同一上下文。但您可以这样指定另一个上下文：

    <ng-container *ngTemplateOutlet="template0;context=newCtx">
        
    </ng-container>

发件人：

    export class MyComponent implements OnInit {
      data = "oldData";
      newCtx = {data = "newData"};
      ...
    }

像这样，将插入“ newData”而不是“ oldData”。

现在，您确实意识到 newCtx 具有any作为类型，而这正是TemplateRef<any>的来源。在大多数情况下，您可能会满意，但是出于可重用性或仅用于编译器检查的目的，您可以精确确定此上下文应为哪个类：TemplateRef<CustomContextClass>，并且您必须像这样声明上下文： newCtx:CustomContextClass（或者自然是CustomContextClass的任何子类）。

src：https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/和https://blog.mgechev.com/2017/10/01/angular-template-ref-dynamic-scoping-custom-templates/

TemplateRef需要类型参数

3 个答案: