共计 4053 个字符,预计需要花费 11 分钟才能阅读完成。
上一篇介绍了原生 API 的动静视图插入,性能上曾经能够满足大多数应用场景。不过也有一些缺憾,还没有解决在 Angular 利用外插入内容的需要,指令也不能跟动静插入的组件有输入输出的交互。这就到了 CDK(Component Dev Kit)出场的时候了
Angular 官网提供了一套组件开发套件 Component Dev Kit (CDK),作为各种 Angular 组件开发的根底工具,其中就提供“Portal(传送门)”来辅助动静视图的创立。
这个”动静视图“能够是组件、TemplateRef 或者 DOM 元素,别离对应三种 Portal 类型(ComponentPortal、TemplatePortal、DomPortal)。它们三个的形象泛型基类是 Portal<T>
,有三个办法:attach(挂载到容器)、detach(从容器移除)、isAttached(判断视图是否是挂载状态)。
而容器也是由一个抽象类 BasePortalOutlet
定义,和视图相似,蕴含 attach(给容器挂载视图)、detach(从容器移除视图)、dispose(销毁容器)、isAttached(是否有挂载视图)。它的次要实现是 DomPortalOutlet
类。用以挂载三种类型的动静视图。
创立动静内容
先来看看三种动静视图的创立。
ComponentPortal
相比原生 API,要创立一个动静组件十分的简略,只须要把组件类传入 ComponentPortal
构造函数即可。
this.componentPortal = new ComponentPortal(ExampleComponent);
能够传入任意自定义的组件类,用以创立 ComponentPortal
对象,再动静插入视图中。
✨留神:Angular 9 后的版本举荐应用 Ivy 编译器,如果是老版本编译器,传入的组件类,须要在 Module 的 entryComponents
中申明,并且这个 Module 不能懒加载。
TemplatePortal
TemplatePortal 的构建,相比组件,多了一个参数(ViewContainerRef)。看过前一篇应该对它十分相熟了,须要依赖它调用 createEmbeddedView()
来创立嵌入视图。这里通过结构注入,间接应用以后组件的 ViewContainerRef
实例。
<ng-template #testTemplate>
<p> 一些须要动静插入的内容.</p>
</ng-template>
@ViewChild('testTemplate') templatePortalContent: TemplateRef<any>;
constructor(private _viewContainerRef: ViewContainerRef) { }
ngAfterViewInit() {
this.templatePortal = new TemplatePortal(
this.templatePortalContent,
this._viewContainerRef
);
}
除了通过构造函数,TemplatePortal 也有一个指令(CdkPortal)能够便捷创立。
<ng-template cdkPortal>
<p> 一些须要动静插入的内容.</p>
</ng-template>
<!-- 或写作 -->
<!-- 和下面写法是统一的成果 -->
<p *cdkPortal>
一些须要动静插入的内容.
</p>
而后通过 @ViewChild
就能够取得 TemplatePortal
的实例了。
DomPortal
就像下面的示例通过 @ViewChild
获取 Template 实例来创立,相似的也能够获取 ElementRef 来创立动静的 DOM。
<div #domPortalContent><span> 原生 DOM 内容 </span></div>
@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
ngAfterViewInit() {this.domPortal = new DomPortal(this.domPortalContent);
}
能够动静的将这段 DOM 转移到任意地位。要留神的是,转移之后,原来的数据绑定,或者绑定的指令可能不会再持续更新。
插入容器
后面三种类型的 Portal 都说了能够渲染到任意地位,那具体怎么渲染呢?
CdkPortOutlet
最简略的就是通过 CdkPortOutlet 指令了:
<div>
<ng-template [cdkPortalOutlet]="anyPortal"></ng-template>
</div>
给 anyPortal
传值下面三个中任意的 Portal 实例,都会动静渲染到以后地位。
和原生 API 的指令不同,它能够主动判断是什么类型的 Portal。另外,它还有个额定的事件:attached
,通过这个事件,能够获取到挂载的组件实例,或者 TemplateRef。这也让和挂载组件的交互变得非常不便了。
结构容器实例
不过既然说了是能够渲染到任意地位,那天然也包含 Angular 利用内部,要渲染到利用之外,就须要咱们通过构造函数创立容器实例。
这个容器类就是 DomPortalOutlet
,它是 PortalOutlet
的实现子类。它的结构参数次要是:Element(挂载视图的 DOM 节点)、ComponentFactoryResolver(和上篇一样,用以动静构建组件)、appRef(以后 Angular 利用的整体实例)、Injector(注入器,用于传递依赖)。
constructor(
private viewContainerRef: ViewContainerRef,
@Inject(DOCUMENT) private document: any,
private injector: Injector,
private componentFactoryResolver: ComponentFactoryResolver
) {
// 在 <body> 下创立内部宿主元素
const container = this.document.createElement('div');
container.classList.add('outside-portal-container');
this.outsideContainer = this.document.body.appendChild(container);
// 获取利用实例
this.appRef = this.injector.get(ApplicationRef);
// 创立内部容器
this.outsideOutlet = new DomPortalOutlet(
this.outsideContainer,
this.componentFactoryResolver,
this.appRef,
this.injector
);
}
// 在利用内部插入动静组件。openComponentPortalOutSideAngularContext(): void {const componentPortal = new ComponentPortal(AlertComponent);
const componentRef = this.outsideOutlet.attach(componentPortal);
componentRef.instance.closeAlert.subscribe(() => {this.outsideOutlet.detach();
});
}
// 在利用内部插入动静模板。openTemplatePortalInsideAngularContext(): void {const templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);
this.outsideOutlet.attach(templatePortal);
}
除了挂载视图到利用外的 DOM 元素中,还须要可能跟视图进行数据交互,组件能够通过注入依赖,模板能够传入上下文对象。
const injectionToken = new InjectionToken<any>('Sharing data with outside component portal');
const customInjector = Injector.create({providers: [{ provide: CustomInjectionToken, useValue: 'test value'}] });
对创立 outsideContainer 的代码稍作批改,把这个 customInjector 作为参数传入(而不是应用以后组件的 injector)
// 重点是第四个参数
new DomPortalOutlet(this.outsideContainer, this.componentFactoryResolver, this.appRef, customInjector);
相应的,这个组件只须要按这个 injectionToken 注入依赖即可:
constructor(@Inject(injectionToken) public customData: any) {}
给模板传递上下文就比较简单了,在创立 TemplatePortal 对象时,传入上下文对象即可:
// 重点是第三个参数
new TemplatePortal(this.templatePortalContent, this.viewContainerRef, { customData:'test values'});
总结
相比原生 API,CDK portal 次要实现了:
- 动静插入视图到利用内部的能力;
- 和插入到内部的视图数据交互的能力;
- 更加便捷和灵便的指令。
有了它,创立动静的组件容器,或者弹窗,浮动菜单,甚至是搭建一个低代码设计平台,都变得更加容易了。
我的项目源码
在线示例