Angular-自定义元素标签和动态组件

1、自定义元素 答:即浏览器允许用户自定义标签来扩展HTML,也称之为web Component,当将自定义标签添加到CustomElementRegistry(自定义元素注册表)中之后就会被浏览器识别,可在HTML的任何位置使用。在angular中可以通过自定义元素标签将angular组件(包括变更检测机制和数据绑定功能)插入到不受angular控制的HTML内容中,可用于替代动态组件   2、如何将angular组件转换为自定义元素 答:     a、使用angular内置模块@angular/el ements中的createCustomElement(ComponentClass)方法将传入的组件类转换为NgElementConstructor类型的构造器类     b、使用浏览器内置的customElements.define()方法,将自定义标签名和第一步根据angular组件生成的自定义元素标签构造器类一同传入其中,完成向浏览器的CustomElementRegistry(自定义元素注册表)中注册此自定义元素标签的过程     c、在html中使用此自定义元素标签时,浏览器会使用此标签对应的构造器类创建一个自定义元素标签的实例       注意:angular组件中的输入和输出属性对应到自定义元素标签上就是Attribute和浏览器的自定义事件,且自定义输出属性传递的数据被存放在自定义事件的事件对象中的detail属性中,并且保留着变更检测和数据绑定的功能,同时需要在angular的根模块的@NgModule装饰器对象属性entryComponent中添加此组件   3、为自定义元素标签提供类型支持 答:使用在angular的@angular/elements模块中提供的NgElement和WithProperties<T>两个类型。         NgElement:是对HTMLElement类型的扩展         WithProperties<T>:来说明angular组件中定义的其它输入和输出属性     有两种方式提供:         a、直接在使用的地方提供:             如:document.createElement('my-custom-tag') as NgElement & WithProperties<{inputAttr: string}>         b、创建一个扩展HTMlElementTagNameMap接口的类型文件,用来集中声明自定义元素标签的类型             如:             declare global {                 interface HTMLElementTagNameMap {                     'my-custom-tag': NgElement & WithProperties<{inputAttr: string}>                 }             }   4、动态组件 答:即在应用程序运行期间根据需要动态加载的一类组件,需要提前添加到根模块的@NgModule装饰器对象的entryComponent属性中   5、创建及使用动态组件 答:     a、将需要作为动态组件使用的组件添加到跟模块的@NgModule装饰配置对象的entryComponent属性中     b、在需要使用动态组件的模板中指定插入动态组件的位置,如:         <ng-template #dynamicComContainer></ng-template>     c、在需要使用动态组件的组件类中使用@ViewChild装饰器获取插入位置的视图容器引用,如:         @ViewChild(ViewContainerRef) viewRef !:  ViewContainerRef;     d、使用ViewContainerRef类中提供的createComponent方法创建组件引用并向视图容器中插入该组件,         且createComponent方法会返回一个ComponentRef,即所创建的组件实例的引用,通过该引用可以实现与动态组件之间的交互   注意:在angular的v13之前使用的是ComponentFactoryResolver,在之后使用ViewContainerRef.createComponent方法直接创建动态组件
上一篇:angular项目中的httpClint模块中的delete请求传递参数问题


下一篇:【angular-实践】数据监听并渲染到界面上