Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:02:23

Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法

Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法:2018年4月23隨著angular6 發(fā)布，我們可以看到在其官方手冊中的模板元素章節(jié)中增加了一個Element 條目(中文)，通過說明我們可以知道這個功能可以幫助我們將angular以html標(biāo)簽的形式嵌入到非angular的頁面環(huán)境中。下面我們就通過一個簡單的例子演示Angula

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法:2018年4月23隨著angular6 發(fā)布，我們可以看到在其官方手冊中的模板元素章節(jié)中增加了一個Element 條目(中文)，通過說明我們可以知道這個功能可以幫助我們將angular以html標(biāo)簽的形式嵌入到非angular的頁面環(huán)境中。下面我們就通過一個簡單的例子演示Angula

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

{
 "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"
 ]
 }
}

增加外部事件

通過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<string> = new EventEmitter<string>();
 addItem(item:string){
 console.log(`${item} to be added!`);
 this.items.push(item); 
 // 向外發(fā)送自定義事件
 this.itemAdded.emit(item);
 }

 items:string[] =[];
}

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

 <script>
 var items = document.querySelector('custom-items');

 items.addEventListener('itemAdded', (event) => {
 console.log(event);
 })
 </script>

完結(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"
 },

通過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)簽的輸出，如果其他用戶使用會非常不便，

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="main.js"></script>

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

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

這樣用戶就可以引用單個文件來使用我們制做的custom-items了。

一定注記合并文件的次序，需要嚴(yán)格按照上述次序進(jìn)行，否則腳本可能不能正常工作。

示例代碼

在線示例

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：標(biāo)簽的自定義標(biāo)簽 angular6

熱門焦點

Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法

Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法

Angular6 用戶自定義標(biāo)簽開發(fā)的實現(xiàn)方法

最新推薦

猜你喜歡

熱門推薦