怎么在Angular6中自定義標(biāo)簽

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在Angular6中自定義標(biāo)簽，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

獨(dú)山子網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

新建angular工程

通過(guò)ng命令新建custom-tag工程

ng new custom-tag

cli新建完相應(yīng)文件后會(huì)通過(guò)npm下載所信賴的包，完成后進(jìn)入目錄驗(yàn)證工作空間是否正常。

$cd custom-tag
$ng serve --open

--open參數(shù)的作用是直接打開(kāi)瀏覽器，也可以通過(guò)瀏覽器中直接輸入localhost:4200。

增加標(biāo)簽功能

修改app.component.html 內(nèi)容

  {{item}}

為對(duì)應(yīng)的類(lèi)增加 addItem()方法，向類(lèi)中的條目集合(items)增加用戶輸入的一個(gè)條目。

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[] =[];
}

小結(jié)

到目前為止這是一個(gè)普通的angular應(yīng)用，通過(guò)增加按鈕，要以向列表中增加元素。

應(yīng)用狀態(tài)

將完成內(nèi)容轉(zhuǎn)換為自定義標(biāo)簽

增加@angular/comonents信賴

$ng add @angular/elements

修改app.module.ts

從包中導(dǎo)入相關(guān)依賴:

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

將AppComponent改為動(dòng)態(tài)組件，并通過(guò)createCustomElement()注冊(cè)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頁(yè)面

頁(yè)面重新出現(xiàn)在瀏覽器中了，功能也同先前一模一樣。

由于瀏覽器版本的原因可能會(huì)出現(xiàn)下面錯(cuò)誤，無(wú)法創(chuàng)建自定義標(biāo)簽

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)

可以通過(guò)修改tsconfig.json中的構(gòu)建目標(biāo)至es6解決該問(wèn)題

{
 "compileOnSave": false,
 "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es6",
  "typeRoots": [
   "node_modules/@types"
  ],
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

增加外部事件

通過(guò)output 可以為自定義標(biāo)簽增加自定義事件

import { Component,Output, EventEmitter } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 
 @Output() itemAdded:EventEmitter = new EventEmitter();
 addItem(item:string){
  console.log(`${item} to be added!`);
  this.items.push(item); 
  // 向外發(fā)送自定義事件
  this.itemAdded.emit(item);
 }

 items:string[] =[];
}

在客戶端頁(yè)面可以通過(guò)自定義標(biāo)簽對(duì)象的addEventListener()方法增加自定義事件響應(yīng)，通過(guò) event.detail可以獲取到angular內(nèi)部發(fā)送的內(nèi)容

完結(jié)與發(fā)布

在package.json中增加發(fā)布腳本

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --output-hashing none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

通過(guò)npm run build 執(zhí)行構(gòu)建，由于我們關(guān)閉了文件名hash,得到的輸出目錄內(nèi)容如下：

liunan@liunan-desktop:~/webDev/custom-tag$ ls ./dist/custom-tag/
3rdpartylicenses.txt favicon.ico index.html main.js polyfills.js runtime.js scripts.js styles.css

我們可以看到輸出的index.html文件中采用如下方式引用了定義標(biāo)簽的輸出，如果其他用戶使用會(huì)非常不便，

我們可以通過(guò)使用cat命令將這些文件按照上面順序合并成一個(gè)文件

$cat runtime.js polyfills.js scripts.js main.js > custom-items.js

上述就是小編為大家分享的怎么在Angular6中自定義標(biāo)簽了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：怎么在Angular6中自定義標(biāo)簽
文章分享：http://m.jiaotiyi.com/article/picjod.html