传送点 Portal

portal 概览

portals 包提供了一个灵活的布局体系,可以把动态内容渲染到应用中。

The portals package provides a flexible system for rendering dynamic content into an application.

Portal 是一小块 UI,可以被动态渲染到页面上的空白插槽(slot)中。

A Portal is a piece of UI that can be dynamically rendered to an open slot on the page.

这“一小块 UI”既可以是 ComponentTemplateRef 或 DOM 元素,而“空白的插槽”是指 PortalOutlet

The "piece of UI" can be either a Component, a TemplateRef or a DOM element and the "open slot" is a PortalOutlet.

各种 Portal 和 PortalOutlet 是建立在其它概念(比如浮层)之上的底层构造块。

Portals and PortalOutlets are low-level building blocks that other concepts, such as overlays, are built upon.

Portal overview

The portal outlet is below:

Hello, this is a DOM portal

方法

Method

说明

Description

attach(PortalOutlet): T

把此传送点附着到宿主上。

Attaches the portal to a host.

detach(): void

把此传送点从宿主上拆除。

Detaches the portal from its host.

isAttached: boolean

此传送点是否已附着上。

Whether the portal is attached.

方法

Method

说明

Description

attach(Portal): any

把指定的传送点添加到此宿主上。

Attaches a portal to the host.

detach(): any

把指定的传送点从此宿主上拆除。

Detaches the portal from the host.

dispose(): void

永久销毁此宿主。

Permanently dispose the host.

hasAttached: boolean

判断是否有传送点附着在此宿主上。

Whether a portal is attached to the host.

用于从某个 <ng-template> 获取传送点。CdkPortal 一个 Portal

Used to get a portal from an <ng-template>. CdkPortal is a Portal.

用法:

Usage:

<ng-template cdkPortal>
  <p>The content of this template is captured by the portal.</p>
</ng-template>

<!-- OR -->

<!-- This result here is identical to the syntax above -->
<p *cdkPortal>
  The content of this template is captured by the portal.
</p>

组件可以使用 @ViewChild@ViewChildren 来获取对 CdkPortal 的引用。

A component can use @ViewChild or @ViewChildren to get a reference to a CdkPortal.

用于从某个组件类创建传送点。当使用传送点动态创建组件时,如果你的项目使用 ViewEngine,就必须把该组件包含在 NgModuleentryComponents 中。而那些使用 Angular Ivy 的项目不需要 entryComponents

Used to create a portal from a component type. When a component is dynamically created using portals, it must be included in the entryComponents of its NgModuleif your project uses ViewEngine. Projects using Angular Ivy don't need entryComponents.

用法:

Usage:

ngAfterViewInit() {
  this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
}

你可以从 <ng-template> TemplatePortalTemplatePortal 允许你在一个模板中获取 Angular 的内容,并把它渲染到其他地方。

You can create a TemplatePortal from an <ng-template>. TemplatePortal allows you to take Angular content within one template and render it somewhere else.

用法:

Usage:

<ng-template #templatePortalContent>Some content here</ng-template>
@ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknow>;

ngAfterViewInit() {
  this.templatePortal = new TemplatePortal(
    this.templatePortalContent,
    this._viewContainerRef
  );
}

你可以从任何的 native DOM 元素 DomPortal DomPortal 允许你把任意 DOM 内容带到其它地方。DomPortal移动内容,因此,如果经由移动,角元件设有像绑定或指令可能不再更新 DomPortal

You can create a DomPortal from any native DOM element. DomPortal allows you to take any arbitrary DOM content and render it somewhere else. DomPortal moves content as is, so elements with Angular features like bindings or directives may no longer update if moved via DomPortal.

用法:

Usage:

<div #domPortalContent>Some content here</div>
@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
ngAfterViewInit() {
  this.domPortal = new DomPortal(this.domPortalContent);
}

用于向模板中添加一个传送点出口(Portal Outlet)。CdkPortalOutlet 一个 PortalOutlet

Used to add a portal outlet to a template. CdkPortalOutlet is a PortalOutlet.

用法:

Usage:

<!-- Attaches the `userSettingsPortal` from the previous example. -->
<ng-template [cdkPortalOutlet]="userSettingsPortal"></ng-template>