传送点 Portal

portal 的 API

Angular CDK portal API 参考文档

import {PortalModule} from '@angular/cdk/portal';

TemplatePortal 的指令版本。由于该指令一个 TemplatePortal,所以该指令实例本身也可以附加到一个宿主上,从而能够声明式地使用这些传送点。

Directive version of a TemplatePortal. Because the directive is a TemplatePortal, the directive instance itself can be attached to a host, enabling declarative use of portals.

选择器: [cdkPortal]
导出为: cdkPortal
属性
名称 描述

context: C | undefined

要传入内嵌式视图中的上下文数据。

Contextual data to be passed in to the embedded view.

isAttached: boolean

此传送点是否已附加到宿主上。

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef<C>

嵌入式模板,用于在宿主中实例化一个嵌入式视图。

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

要容纳模板生成物的 ViewContainer 的引用。

Reference to the ViewContainer into which the template will be stamped out.

方法
attach

把此传送点添加到所提供的 PortalOutlet 中。当提供了上下文时,它会改写 TemplatePortal 实例 context 属性。

Attach the portal to the provided PortalOutlet. When a context is provided it will override the context property of the TemplatePortal instance.

参数

Parameters

host

PortalOutlet

context

C = this.context

返回值

Returns

EmbeddedViewRef<C>
detach
setAttachedHost

在不执行 attach() 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 attach()detach() 时会直接使用它。

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet
选择器: [cdk-portal] [portal]
导出为: cdkPortal
已弃用
属性
名称 描述

context: C | undefined

要传入内嵌式视图中的上下文数据。

Contextual data to be passed in to the embedded view.

isAttached: boolean

此传送点是否已附加到宿主上。

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef<C>

嵌入式模板,用于在宿主中实例化一个嵌入式视图。

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

要容纳模板生成物的 ViewContainer 的引用。

Reference to the ViewContainer into which the template will be stamped out.

方法
attach

把此传送点添加到所提供的 PortalOutlet 中。当提供了上下文时,它会改写 TemplatePortal 实例 context 属性。

Attach the portal to the provided PortalOutlet. When a context is provided it will override the context property of the TemplatePortal instance.

参数

Parameters

host

PortalOutlet

context

C = this.context

返回值

Returns

EmbeddedViewRef<C>
detach
setAttachedHost

在不执行 attach() 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 attach()detach() 时会直接使用它。

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet

PortalOutlet 的指令版本。由于该指令一个 PortalOutlet,因此可以直接把传送点附加到这里,从而实现声明式使用。

Directive version of a PortalOutlet. Because the directive is a PortalOutlet, portals can be directly attached to it, enabling declarative use.

用法: <ng-template [cdkPortalOutlet]="greeting"></ng-template>

Usage: <ng-template [cdkPortalOutlet]="greeting"></ng-template>

选择器: [cdkPortalOutlet]
导出为: cdkPortalOutlet
属性
名称 描述
@Input( cdkPortalOutlet)

portal: Portal<any> | null

与此传送点出口地标关联的传送点。

Portal associated with the Portal outlet.

@Output()

attached: EventEmitter<CdkPortalOutletAttachedRef>

当传送点连接到此出口地标时,会发出通知。

Emits when a portal is attached to the outlet.

attachedRef: CdkPortalOutletAttachedRef

附加了传送点的组件或视图的引用。

Component or view reference that is attached to the portal.

已弃用

attachDomPortal: (portal: DomPortal) => { if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Cannot attach DOM portal without _document constructor parameter'); } const element = portal.element; if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('DOM portal content must be attached to a parent node.'); } const anchorNode = this._document.createComment('dom-portal'); portal.setAttachedHost(this); element.parentNode!.insertBefore(anchorNode, element); this._getRootNode().appendChild(element); super.setDisposeFn(() => { if (anchorNode.parentNode) { anchorNode.parentNode!.replaceChild(element, anchorNode); } }); }

把所有的传送点内容都移入到指定的 DomPortal 中,以把它附加到这个 PortalHost 上。

Attaches the given DomPortal to this PortalHost by moving all of the portal content into it.

方法
attach

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attach

参数

Parameters

portal

TemplatePortal<T>

返回值

Returns

EmbeddedViewRef<T>
attach

参数

Parameters

portal

any

返回值

Returns

any
attachComponentPortal

使用 ComponentFactoryResolver 把指定的 ComponentPortal 贴到这个 PortalOutlet 上。

Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.

参数

Parameters

portal

ComponentPortal<T>

要附加到传送点出口地标的传送点。

Portal to be attached to the portal outlet.

返回值

Returns

ComponentRef<T>

引用所创建的组件。

Reference to the created component.

attachTemplatePortal

把这个指定的 TemplatePortal 作为嵌入式视图附加到这个 PortalHost 中。

Attach the given TemplatePortal to this PortalHost as an embedded View.

参数

Parameters

portal

TemplatePortal<C>

要附加的传送点

Portal to be attached.

返回值

Returns

EmbeddedViewRef<C>

所创建的嵌入式视图的引用。

Reference to the created embedded view.

detach

拆除以前附加过的传送点。

Detaches a previously attached portal.

dispose

永久销毁这个 Portal 宿主。

Permanently dispose of this portal host.

hasAttached

该宿主是否有附加的传送点。

Whether this host has an attached portal.

返回值

Returns

boolean
选择器: [cdkPortalHost] [portalHost]
导出为: cdkPortalHost
已弃用
属性
名称 描述
@Input( cdkPortalHost)

portal: Portal<any> | null

与此传送点出口地标关联的传送点。

Portal associated with the Portal outlet.

@Output()

attached: EventEmitter<CdkPortalOutletAttachedRef>

当传送点连接到此出口地标时,会发出通知。

Emits when a portal is attached to the outlet.

attachedRef: CdkPortalOutletAttachedRef

附加了传送点的组件或视图的引用。

Component or view reference that is attached to the portal.

已弃用

attachDomPortal: (portal: DomPortal) => { if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Cannot attach DOM portal without _document constructor parameter'); } const element = portal.element; if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('DOM portal content must be attached to a parent node.'); } const anchorNode = this._document.createComment('dom-portal'); portal.setAttachedHost(this); element.parentNode!.insertBefore(anchorNode, element); this._getRootNode().appendChild(element); super.setDisposeFn(() => { if (anchorNode.parentNode) { anchorNode.parentNode!.replaceChild(element, anchorNode); } }); }

把所有的传送点内容都移入到指定的 DomPortal 中,以把它附加到这个 PortalHost 上。

Attaches the given DomPortal to this PortalHost by moving all of the portal content into it.

方法
attach

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attach

参数

Parameters

portal

TemplatePortal<T>

返回值

Returns

EmbeddedViewRef<T>
attach

参数

Parameters

portal

any

返回值

Returns

any
attachComponentPortal

使用 ComponentFactoryResolver 把指定的 ComponentPortal 贴到这个 PortalOutlet 上。

Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.

参数

Parameters

portal

ComponentPortal<T>

要附加到传送点出口地标的传送点。

Portal to be attached to the portal outlet.

返回值

Returns

ComponentRef<T>

引用所创建的组件。

Reference to the created component.

attachTemplatePortal

把这个指定的 TemplatePortal 作为嵌入式视图附加到这个 PortalHost 中。

Attach the given TemplatePortal to this PortalHost as an embedded View.

参数

Parameters

portal

TemplatePortal<C>

要附加的传送点

Portal to be attached.

返回值

Returns

EmbeddedViewRef<C>

所创建的嵌入式视图的引用。

Reference to the created embedded view.

detach

拆除以前附加过的传送点。

Detaches a previously attached portal.

dispose

永久销毁这个 Portal 宿主。

Permanently dispose of this portal host.

hasAttached

该宿主是否有附加的传送点。

Whether this host has an attached portal.

返回值

Returns

boolean

你希望在其它地方渲染的 Portal。它可以附加到 PortalOutlet 或从那里拆除。

A Portal is something that you want to render somewhere else. It can be attach to / detached from a PortalOutlet.

属性
名称 描述

isAttached: boolean

此传送点是否已附加到宿主上。

Whether this portal is attached to a host.

方法
attach

把这个传送点附加到宿主上

Attach this portal to a host.

参数

Parameters

host

PortalOutlet

返回值

Returns

T
detach

从宿主那里删除这个传送点

Detach this portal from its host

setAttachedHost

在不执行 attach() 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 attach()detach() 时会直接使用它。

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet

ComponentPortal 是一个传送点,它会把某些组件实例化并作为自己的附件。

A ComponentPortal is a portal that instantiates some Component upon attachment.

属性
名称 描述

component: ComponentType<T>

要作为附件实例化的组件类型。

The type of the component that will be instantiated for attachment.

componentFactoryResolver: ComponentFactoryResolver | null

在解析相关组件时要用到的 ComponentFactoryResolver 替代品。默认使用来自传送点所附加的出口地标的解析器。

Alternate ComponentFactoryResolver to use when resolving the associated component. Defaults to using the resolver from the outlet that the portal is attached to.

injector: Injector | null

[可选] 供组件实例化时使用的注入器。

[Optional] Injector used for the instantiation of the component.

isAttached: boolean

此传送点是否已附加到宿主上。

Whether this portal is attached to a host.

viewContainerRef: ViewContainerRef | null

[可选] 附加组件应该放在 Angular 的逻辑组件树中。这与组件渲染的位置不同,后者由 PortalOutlet 决定。当宿主在 Angular 应用的上下文之外时,这个原点是必需的。

[Optional] Where the attached component should live in Angular's logical component tree. This is different from where the component renders, which is determined by the PortalOutlet. The origin is necessary when the host is outside of the Angular application context.

方法
attach

把这个传送点附加到宿主上

Attach this portal to a host.

参数

Parameters

host

PortalOutlet

返回值

Returns

T
detach

从宿主那里删除这个传送点

Detach this portal from its host

setAttachedHost

在不执行 attach() 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 attach()detach() 时会直接使用它。

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet

TemplatePortal 是一个代表嵌入式模板(TemplateRef)的传送点。

A TemplatePortal is a portal that represents some embedded template (TemplateRef).

属性
名称 描述

context: C | undefined

要传入内嵌式视图中的上下文数据。

Contextual data to be passed in to the embedded view.

isAttached: boolean

此传送点是否已附加到宿主上。

Whether this portal is attached to a host.

origin: ElementRef

templateRef: TemplateRef<C>

嵌入式模板,用于在宿主中实例化一个嵌入式视图。

The embedded template that will be used to instantiate an embedded View in the host.

viewContainerRef: ViewContainerRef

要容纳模板生成物的 ViewContainer 的引用。

Reference to the ViewContainer into which the template will be stamped out.

方法
attach

把此传送点添加到所提供的 PortalOutlet 中。当提供了上下文时,它会改写 TemplatePortal 实例 context 属性。

Attach the portal to the provided PortalOutlet. When a context is provided it will override the context property of the TemplatePortal instance.

参数

Parameters

host

PortalOutlet

context

C = this.context

返回值

Returns

EmbeddedViewRef<C>
detach
setAttachedHost

在不执行 attach() 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 attach()detach() 时会直接使用它。

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet

DomPortal 是一个传送点,它的 DOM 元素会从 DOM 中的当前位置获取,并在附加到传送点时移入其中。在拆除时,内容将恢复到其原来的位置。

A DomPortal is a portal whose DOM element will be taken from its current position in the DOM and moved into a portal outlet, when it is attached. On detach, the content will be restored to its original position.

属性
名称 描述

element: T

传送点内容的宿主 DOM 节点。

DOM node hosting the portal's content.

isAttached: boolean

此传送点是否已附加到宿主上。

Whether this portal is attached to a host.

方法
attach

把这个传送点附加到宿主上

Attach this portal to a host.

参数

Parameters

host

PortalOutlet

返回值

Returns

T
detach

从宿主那里删除这个传送点

Detach this portal from its host

setAttachedHost

在不执行 attach() 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 attach()detach() 时会直接使用它。

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet

PortalOutlet 的部分实现,用于处理附加的 ComponentPortal 和 TemplatePortal。

Partial implementation of PortalOutlet that handles attaching ComponentPortal and TemplatePortal.

属性
名称 描述

attachDomPortal: null | ((portal: DomPortal) => any)

方法
attach

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attach

参数

Parameters

portal

TemplatePortal<T>

返回值

Returns

EmbeddedViewRef<T>
attach

参数

Parameters

portal

any

返回值

Returns

any
attachComponentPortal

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attachTemplatePortal

参数

Parameters

portal

TemplatePortal<C>

返回值

Returns

EmbeddedViewRef<C>
detach

拆除以前附加过的传送点。

Detaches a previously attached portal.

dispose

永久销毁这个 Portal 宿主。

Permanently dispose of this portal host.

hasAttached

该宿主是否有附加的传送点。

Whether this host has an attached portal.

返回值

Returns

boolean
已弃用
属性
名称 描述

attachDomPortal: null | ((portal: DomPortal) => any)

方法
attach

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attach

参数

Parameters

portal

TemplatePortal<T>

返回值

Returns

EmbeddedViewRef<T>
attach

参数

Parameters

portal

any

返回值

Returns

any
attachComponentPortal

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attachTemplatePortal

参数

Parameters

portal

TemplatePortal<C>

返回值

Returns

EmbeddedViewRef<C>
detach

拆除以前附加过的传送点。

Detaches a previously attached portal.

dispose

永久销毁这个 Portal 宿主。

Permanently dispose of this portal host.

hasAttached

该宿主是否有附加的传送点。

Whether this host has an attached portal.

返回值

Returns

boolean

PortalOutlet,用于把传送点附加到 Angular 应用上下文之外的任意一个 DOM 元素上。

A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular application context.

属性
名称 描述

outletElement: Element

Element into which the content is projected.

已弃用

attachDomPortal: (portal: DomPortal) => { if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Cannot attach DOM portal without _document constructor parameter'); } const element = portal.element; if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('DOM portal content must be attached to a parent node.'); } const anchorNode = this._document.createComment('dom-portal'); element.parentNode!.insertBefore(anchorNode, element); this.outletElement.appendChild(element); super.setDisposeFn(() => { if (anchorNode.parentNode) { anchorNode.parentNode.replaceChild(element, anchorNode); } }); }

通过把其内容传入指定的地标来附加到 DOM 传送点。

Attaches a DOM portal by transferring its content into the outlet.

方法
attach

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attach

参数

Parameters

portal

TemplatePortal<T>

返回值

Returns

EmbeddedViewRef<T>
attach

参数

Parameters

portal

any

返回值

Returns

any
attachComponentPortal

使用 ComponentFactoryResolver 把指定的 ComponentPortal 添加到 DOM 元素中。

Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.

参数

Parameters

portal

ComponentPortal<T>

要附加到的传送点

Portal to be attached

返回值

Returns

ComponentRef<T>

所创建的组件的引用。

Reference to the created component.

attachTemplatePortal

把一个模板传送点作为嵌入式视图附加到 DOM 上。

Attaches a template portal to the DOM as an embedded view.

参数

Parameters

portal

TemplatePortal<C>

要附加到的传送点。

Portal to be attached.

返回值

Returns

EmbeddedViewRef<C>

所创建的嵌入式视图的引用。

Reference to the created embedded view.

detach

拆除以前附加过的传送点。

Detaches a previously attached portal.

dispose

从 DOM 中清除一个传送点。

Clears out a portal from the DOM.

hasAttached

该宿主是否有附加的传送点。

Whether this host has an attached portal.

返回值

Returns

boolean
已弃用
属性
名称 描述

outletElement: Element

Element into which the content is projected.

已弃用

attachDomPortal: (portal: DomPortal) => { if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Cannot attach DOM portal without _document constructor parameter'); } const element = portal.element; if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('DOM portal content must be attached to a parent node.'); } const anchorNode = this._document.createComment('dom-portal'); element.parentNode!.insertBefore(anchorNode, element); this.outletElement.appendChild(element); super.setDisposeFn(() => { if (anchorNode.parentNode) { anchorNode.parentNode.replaceChild(element, anchorNode); } }); }

通过把其内容传入指定的地标来附加到 DOM 传送点。

Attaches a DOM portal by transferring its content into the outlet.

方法
attach

参数

Parameters

portal

ComponentPortal<T>

返回值

Returns

ComponentRef<T>
attach

参数

Parameters

portal

TemplatePortal<T>

返回值

Returns

EmbeddedViewRef<T>
attach

参数

Parameters

portal

any

返回值

Returns

any
attachComponentPortal

使用 ComponentFactoryResolver 把指定的 ComponentPortal 添加到 DOM 元素中。

Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.

参数

Parameters

portal

ComponentPortal<T>

要附加到的传送点

Portal to be attached

返回值

Returns

ComponentRef<T>

所创建的组件的引用。

Reference to the created component.

attachTemplatePortal

把一个模板传送点作为嵌入式视图附加到 DOM 上。

Attaches a template portal to the DOM as an embedded view.

参数

Parameters

portal

TemplatePortal<C>

要附加到的传送点。

Portal to be attached.

返回值

Returns

EmbeddedViewRef<C>

所创建的嵌入式视图的引用。

Reference to the created embedded view.

detach

拆除以前附加过的传送点。

Detaches a previously attached portal.

dispose

从 DOM 中清除一个传送点。

Clears out a portal from the DOM.

hasAttached

该宿主是否有附加的传送点。

Whether this host has an attached portal.

返回值

Returns

boolean

可以用来对类进行泛型化的接口。

Interface that can be used to generically type a class.

方法
new

参数

Parameters

...args

any[]

返回值

Returns

T

PortalOutlet 是一个可以容纳单个 Portal 的空间。

A PortalOutlet is an space that can contain a single Portal.

方法
attach

把这个传送点连接到这个出口地标。

Attaches a portal to this outlet.

参数

Parameters

portal

Portal<any>

返回值

Returns

any
detach

从当前出口地标上拆除已经附加上的传送点。

Detaches the currently attached portal from this outlet.

返回值

Returns

any
dispose

在销毁之前,先进行清理。

Performs cleanup before the outlet is destroyed.

hasAttached

当前是否有一个连接到此出口地标的传送点。

Whether there is currently a portal attached to this outlet.

返回值

Returns

boolean
已弃用
type PortalHost = PortalOutlet;

可能附加于此 CdkPortalOutlet 上的引用。

Possible attached references to the CdkPortalOutlet.

type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any> | null;