javascript - Angular - 如何执行指令 "see"模板和 ViewContainer？

Question

我有一个简单的组件，它通过名为 *appDelay 的自定义指令在延迟后注入(inject)数字

我已经知道 *是 Angular 将语法去糖化为类似

的提示

<ng-template ...>
...actual markup
</ng-template>

我也知道我们可以将组件/模板注入(inject) viewContainer通过 :

  this.viewContainerRef.createEmbeddedView/Component(this.templateRef);

指令代码是:

@Directive({
  selector: '[appDelay]'
})
export class DelayDirective {
  constructor(
    private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef
  ) {  }
  
  @Input() set appDelay(time: number): void {
    setTimeout(()=>{
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }, time);
  }
}

文档指出:

To access a ViewContainerRef of an Element, you can either place aDirective injected with ViewContainerRef on the Element, or you obtainit via a ViewChild query.

问题:

在一般伪形式中:templateRef 的模板“字符串值”是什么？和 viewContainerRef ？

恕我直言，脱糖模板应该是这样的:

<ng-template ...>
   <card *appDelay="500 * item">
        {{item}}
   </card>
</ng-template>

所以 ViewContainerRef将是对 <ng-template ...> 的引用

并且 templateRef 将是对 <card >...</card> 的引用

— 对吗？

(此外，是否有可能 console.log() 那些 HTML 模板并查看实际标记？

https://plnkr.co/edit/80AGn8bR4CiyH0ceP8ws?p=preview

Answer 1

ViewContainerRef只需指向将作为插入 View 宿主的元素。这些 View 将作为兄弟元素添加到此宿主元素。

对于像 <!----> 这样的结构指令注释将是宿主元素。

脱糖

<div *appDelay="500">
    Hooray
</div>

会是

<ng-template [appDelay]="500">
    <div>
        Hooray
    </div>
</ng-template>

也可以这样描述:

<ng-template view-container-ref></ng-template>
<!-- ViewRef -->
  <div>
    Hooray
  </div>
<!-- /ViewRef -->

自 ng-template没有标记到 DOM 上，它将呈现为 <!----> .

Angular 将创建 ViewContainerRef引用这个评论标签。

vcRef.element.nativeElement

每个 ViewContainer 只能有一个 anchor 元素，每个 anchor 元素只能有一个 ViewContainer。 ViewContainer 是一个容器，可以帮助您操作 View ( ViewRef , EmbeddedViewRef )

还有 TemplateRef将创建实例

class TemplateRef_ {
  constructor(private _parentView: ViewData, private _def: NodeDef) { }

  get elementRef(): ElementRef {
    return new ElementRef(asElementData(this._parentView, this._def.index).renderElement);
  }

及其 elementRef ( anchor 或位置)将指向相同的评论元素。

TemplateRef 的主要特点是有 template属性

this.templateRef._def.element.template

此属性不包含 html 字符串，但描述了 view

this.templateRef._def.element.template.factory + ''

将打印

"function View_AppComponent_1(_l) {
  return jit_viewDef1(0,[(_l()(),jit_elementDef2(0,null,null,1,'div',[],null,null,
      null,null,null)),(_l()(),jit_textDef3(null,['\n    Hooray\n']))],null,null);
}"

这是我们的模板。如您所见，它用 div 描述了 View 带有文本的根元素和子文本节点 \n Hooray\n

Angular 使用这样的 ViewDefinitions位于 ngfactories构建 DOM 树

另见

• Angular2: How is ngfor expanded

• https://github.com/angular/angular/blob/4.2.0-rc.1/packages/core/src/linker/view_ref.ts#L41-L79

别忘了收看https://www.youtube.com/watch?v=EMjTp12VbQ8