填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

EmbeddedViewRef

表示檢視容器中的 Angular 檢視嵌入檢視可以從在範本中定義它的宿主元件之外的元件中參考,也可以由 TemplateRef 進行獨立定義。

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.

Further information available in the Usage Notes...

屬性

屬性說明
abstract context: C

該檢視的上下文,繼承自錨點元素。

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

abstract rootNodes: any[]唯讀

此嵌入式檢視的根節點。

The root nodes for this embedded view.

使用說明

以下範本分為兩個單獨的 TemplateRef 實例,一個外部實例和一個內部實例。

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>
    

這是外部 TemplateRef

This is the outer TemplateRef:

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

這是內部的 TemplateRef

This is the inner TemplateRef:

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

外部和內部 TemplateRef 實例按如下方式組裝到檢視中:

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 -->