您的位置是:网站首页>Javascript编程Javascript编程

手把手教你使用Angular CDK Portal创建动态内容

少儿编程网2022-01-06 17:13:39Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介之前介绍过原生API的动态视图插入,功能上已经可以满足大多数使用场景。不过也有一些缺憾,还没有解决在Angular应用外插入内容的需求,指令也不能跟动态插入的组件有输入输出的交互。好在Angular官方提供了一套组件开发套件ComponentDevKit(CDK),作为各种Angular组件开发的基

lha少儿编程网-https://www.pxcodes.com

之前介绍过原生 API 的动态视图插入,功能上已经可以满足大多数使用场景。不过也有一些缺憾,还没有解决在 Angular 应用外插入内容的需求,指令也不能跟动态插入的组件有输入输出的交互。lha少儿编程网-https://www.pxcodes.com

好在 Angular *方提供了一套组件开发套件 Component Dev Kit (CDK),作为各种 Angular 组件开发的基础工具,其中就提供 “Portal(传送门)” 来辅助动态视图的创建。lha少儿编程网-https://www.pxcodes.com

这个 ”动态视图“ 可以是组件、TemplateRef 或者 DOM 元素,分别对应三种 Portal 类型(ComponentPortal、TemplatePortal、DomPortal)。它们三个的抽象泛型基类是 Portal<T>,有三个方法:attach(挂载到容器)、detach(从容器移除)、isAttached(判断视图是否是挂载状态)。lha少儿编程网-https://www.pxcodes.com

而容器也是由一个抽象类 BasePortalOutlet 定义,和视图类似,包含 attach(给容器挂载视图)、detach(从容器移除视图)、dispose(销毁容器)、isAttached(是否有挂载视图)。它的主要实现是 DomPortalOutlet 类。用以挂载三种类型的动态视图。lha少儿编程网-https://www.pxcodes.com

创建动态内容

先来看看三种动态视图的创建。lha少儿编程网-https://www.pxcodes.com

ComponentPortallha少儿编程网-https://www.pxcodes.com

相比原生 API,要创建一个动态组件非常的简单,只需要把组件类传入 ComponentPortal 构造函数即可。lha少儿编程网-https://www.pxcodes.com

this.componentPortal = new ComponentPortal(ExampleComponent);

可以传入任意自定义的组件类,用以创建 ComponentPortal 对象,再动态插入视图中。lha少儿编程网-https://www.pxcodes.com

✨注意:Angular 9 后的版本推荐使用 Ivy 编译器,如果是老版本编译器,传入的组件类,需要在 Module 的 entryComponents 中声明,并且这个 Module 不能懒加载。lha少儿编程网-https://www.pxcodes.com

TemplatePortallha少儿编程网-https://www.pxcodes.com

TemplatePortal 的构建,相比组件,多了一个参数(ViewContainerRef)。看过前一篇应该对它非常熟悉了,需要依赖它调用 createEmbeddedView() 来创建嵌入视图。这里通过构造注入,直接使用当前组件的 ViewContainerRef 实例。lha少儿编程网-https://www.pxcodes.com

<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)可以便捷创建。lha少儿编程网-https://www.pxcodes.com

<ng-template cdkPortal>
  <p>一些需要动态插入的内容.</p>
</ng-template>

<!-- 或写作 -->

<!-- 和上面写法是一致的效果 -->
<p *cdkPortal>
  一些需要动态插入的内容.
</p>

然后通过 @ViewChild 就可以获得 TemplatePortal 的实例了。lha少儿编程网-https://www.pxcodes.com

DomPortallha少儿编程网-https://www.pxcodes.com

就像上面的示例通过 @ViewChild 获取 Template 实例来创建,类似的也可以获取 ElementRef 来创建动态的 DOM。lha少儿编程网-https://www.pxcodes.com

<div #domPortalContent><span>原生DOM内容</span></div>
@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
ngAfterViewInit() {
  this.domPortal = new DomPortal(this.domPortalContent);
}

可以动态的将这段 DOM 转移到任意位置。要注意的是,转移之后,原来的数据绑定,或者绑定的指令可能不会再继续更新。lha少儿编程网-https://www.pxcodes.com

插入容器

前面三种类型的 Portal 都说了可以渲染到任意位置,那具体怎么渲染呢?lha少儿编程网-https://www.pxcodes.com

CdkPortOutletlha少儿编程网-https://www.pxcodes.com

**简单的就是通过 CdkPortOutlet 指令了:lha少儿编程网-https://www.pxcodes.com

<div>
  <ng-template [cdkPortalOutlet]="anyPortal"></ng-template>
</div>

anyPortal 传值上面三个中任意的 Portal 实例,都会动态渲染到当前位置。lha少儿编程网-https://www.pxcodes.com

和原生 API 的指令不同,它可以自动判断是什么类型的 Portal。另外,它还有个额外的事件:attached,通过这个事件,可以获取到挂载的组件实例,或者 TemplateRef。这也让和挂载组件的交互变得十分方便了。 lha少儿编程网-https://www.pxcodes.com

构造容器实例lha少儿编程网-https://www.pxcodes.com

不过既然说了是可以渲染到任意位置,那自然也包括 Angular 应用外部,要渲染到应用之外,就需要咱们通过构造函数创建容器实例。lha少儿编程网-https://www.pxcodes.com

这个容器类就是 DomPortalOutlet,它是 PortalOutlet 的实现子类。它的构造参数主要是:Element(挂载视图的DOM节点)、ComponentFactoryResolver(和上篇一样,用以动态构建组件)、appRef(当前 Angular 应用的整体实例)、Injector(注入器,用于传递依赖)。lha少儿编程网-https://www.pxcodes.com

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 元素中,还需要能够跟视图进行数据交互,组件可以通过注入依赖,模板可以传入上下文对象。lha少儿编程网-https://www.pxcodes.com

const injectionToken = new InjectionToken<any>('Sharing data with outside component portal');
const customInjector = Injector.create({ providers: [{ provide: CustomInjectionToken, useValue: 'test value' }] });

对创建 outsideContainer 的代码稍作修改,把这个 customInjector 作为参数传入(而不是使用当前组件的 injector)lha少儿编程网-https://www.pxcodes.com

// 重点是第四个参数
new DomPortalOutlet(this.outsideContainer, this.componentFactoryResolver, this.appRef, customInjector);

相应的,这个组件只需要按这个 injectionToken 注入依赖即可:lha少儿编程网-https://www.pxcodes.com

constructor(@Inject(injectionToken) public customData: any) {}

给模板传递上下文就比较简单了,在创建 TemplatePortal 对象时,传入上下文对象即可:lha少儿编程网-https://www.pxcodes.com

// 重点是第三个参数
new TemplatePortal(this.templatePortalContent, this.viewContainerRef, { customData:'test values' });

总结

相比原生 API,CDK portal 主要实现了:lha少儿编程网-https://www.pxcodes.com

  • 动态插入视图到应用外部的能力;lha少儿编程网-https://www.pxcodes.com

  • 和插入到外部的视图数据交互的能力;lha少儿编程网-https://www.pxcodes.com

  • 更加便捷和灵活的指令。lha少儿编程网-https://www.pxcodes.com

有了它,创建动态的组件容器,或者弹窗,浮动菜单,甚至是搭建一个低代码设计平台,都变得更加容易了。lha少儿编程网-https://www.pxcodes.com

项目源码:https://github.com/locotor/angular-dynamic-view-examplelha少儿编程网-https://www.pxcodes.com

在线示例:https://coding-pages-bucket-1575455-8137703-14801-541995-1303365836.cos-website.ap-beijing.myqcloud.com/lha少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程入门!!

以上就是手把手教你使用Angular CDK Portal创建动态内容的详细内容,更多请关注少儿编程网其它相关文章!lha少儿编程网-https://www.pxcodes.com

来源:php中文网lha少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

手把手教你使用Angular CDK Portal创建动态内容

      匿名评论
    • 评论
    人参与,条评论
    手把手教你使用Angular CDK Portal创建动态内容

微信公众号

免费视频教程

先知道