Question

我有一个简单的组件，它通过名为*appDelay

的自定义指令在延迟后注入数字

我已经知道*是一个暗示Angular将语法去糖化为

的提示

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

我也知道我们可以通过以下方式将组件/模板注入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);
  }
}

文档声明：

要访问Element的ViewContainerRef，您可以放置一个使用ViewContainerRef在Element上注入的指令，或者您获得它通过ViewChild查询。

问题：

在通用伪形式中：什么是模板＆＃34;字符串值＆＃34;对于templateRef和viewContainerRef？

恕我直言，脱糖模板将是：

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

因此ViewContainerRef将是对<ng-tempalte ...>

的引用

templateRef将是对<card >...</card>

的引用

- 这是对的吗？

（另外，是否可以console.log()这些HTML模板并查看实际的标记？

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

Answer 1

ViewContainerRef只指向将成为插入视图的主机元素。这些视图将作为兄弟姐妹添加到此主机元素中。

对于结构指令，之类的注释将是主机元素。

Desugar

<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只能有一个锚元素，每个锚元素只能有一个ViewContainer。 ViewContainer是一个可以帮助您操作视图的容器（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（锚点或位置）将指向相同的注释元素。

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根元素和带有文本\n Hooray\n的子文本节点

Angular使用位于ViewDefinitions的{{1}}来构建DOM树

另见

不要忘记观看https://www.youtube.com/watch?v=EMjTp12VbQ8

Angular - 指令如何＆＃34;见＆＃34;模板＆amp; ViewContainer？

1 个答案: