Angular6 用户自定义标签开发的实现方法

日期：2020-12-14 栏目：程序人生浏览：次

2018年4月23随着angular6 发布，我们可以看到在其官方手册中的模板元素章节中增加了一个Element 条目(中文)，通过说明我们可以知道这个功能可以帮助我们将angular以html标签的形式嵌入到非angular的页面环境中。下面我们就通过一个简单的例子演示Angular6中的这一新功能。

新建angular工程

通过ng命令新建custom-tag工程

ng new custom-tag

cli新建完相应文件后会通过npm下载所信赖的包，完成后进入目录验证工作空间是否正常。

$cd custom-tag $ng serve --open

--open参数的作用是直接打开浏览器，也可以通过浏览器中直接输入localhost:4200。

Angular6 用户自定义标签开发的实现方法

增加标签功能

修改app.component.html 内容

<input #inputtext type="text" placeholder="条目"> <input type="button" value="增加" (click)="addItem(inputtext.value)"> <ul> <li *ngFor="let item of items">{{item}}</li> </ul>

为对应的类增加 addItem()方法，向类中的条目集合(items)增加用户输入的一个条目。

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { addItem(item:string){ console.log(`${item} to be added!`); this.items.push(item); } items:string[] =[]; }

小结

到目前为止这是一个普通的angular应用，通过增加按钮，要以向列表中增加元素。

Angular6 用户自定义标签开发的实现方法

应用状态

将完成内容转换为自定义标签

增加@angular/comonents信赖

$ng add @angular/elements

修改app.module.ts

从包中导入相关依赖:

import { Injector} from '@angular/core'; import { createCustomElement } from '@angular/elements';

将AppComponent改为动态组件，并通过createCustomElement()注册AppComponent为custom-items

import { BrowserModule } from '@angular/platform-browser'; import { NgModule,Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], //bootstrap: [AppComponent] entryComponents : [ AppComponent ] }) export class AppModule { constructor(private injector : Injector){ const cust_tag = createCustomElement(AppComponent, {injector : this.injector}); customElements.define('custom-items',cust_tag); } ngDoBootstrap() {} }

修改index.html页面

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CustomTag</title> <base href="https://www.jb51.net/" > <meta content="width=device-width, initial-scale=1"> <link type="image/x-icon" href="https://www.jb51.net/favicon.ico" > </head> <body>  <custom-items></custom-items> </body> </html>

页面重新出现在浏览器中了，功能也同先前一模一样。

由于浏览器版本的原因可能会出现下面错误，无法创建自定义标签

elements.js:384 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at NgElementImpl.NgElement [as constructor] (elements.js:384)
    at new NgElementImpl (elements.js:420)
    at new AppModule (app.module.ts:24)
    at _createClass (core.js:8421)
    at _createProviderInstance (core.js:8393)
    at initNgModule (core.js:8326)
    at new NgModuleRef_ (core.js:9052)
    at createNgModuleRef (core.js:9041)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:10866)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:11583)

可以通过修改tsconfig.json中的构建目标至es6解决该问题

转载注明出处：http://www.heiqu.com/671cacfe4189fd709a4355624108d780.html

Angular6 用户自定义标签开发的实现方法

相关推荐