EmbeddedViewRef

Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.

查看"说明"...

      
      abstract class EmbeddedViewRef<C> extends ViewRef {
  abstract context: C
  abstract rootNodes: any[]

  // 继承自 core/ViewRef
  abstract destroyed: boolean
  abstract destroy(): void
  abstract onDestroy(callback: Function): any

  // 继承自 core/ChangeDetectorRef
  abstract markForCheck(): void
  abstract detach(): void
  abstract detectChanges(): void
  abstract checkNoChanges(): void
  abstract reattach(): void
}
    

参见

说明

Properties of elements in a view can change, but the structure (number and order) of elements in a view cannot. Change the structure of elements by inserting, moving, or removing nested views in a view container.

属性

属性说明
abstract context: C 只读

The context for this view, inherited from the anchor element.

abstract rootNodes: any[] 只读

The root nodes for this embedded view.

使用说明

The following template breaks down into two separate TemplateRef instances, an outer one and an inner one.

Count: {{items.length}} <ul> <li *ngFor="let item of items">{{item}}</li> </ul>
      
      Count: {{items.length}}
<ul>
  <li *ngFor="let  item of items">{{item}}</li>
</ul>
    

This is the outer TemplateRef:

Count: {{items.length}} <ul> <ng-template ngFor let-item [ngForOf]="items"></ng-template> </ul>
      
      Count: {{items.length}}
<ul>
  <ng-template ngFor let-item [ngForOf]="items"></ng-template>
</ul>
    

This is the inner TemplateRef:

<li>{{item}}</li>
      
      <li>{{item}}</li>
    

The outer and inner TemplateRef instances are assembled into views as follows:

<!-- ViewRef: outer-0 --> Count: 2 <ul> <ng-template view-container-ref></ng-template> <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 --> <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 --> </ul> <!-- /ViewRef: outer-0 -->
      
      <!-- ViewRef: outer-0 -->
Count: 2
<ul>
  <ng-template view-container-ref></ng-template>
  <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
  <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
</ul>
<!-- /ViewRef: outer-0 -->