Angular6 用戶自定義標簽開發的實現方法

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

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); 
 // 向外發送自定義事件
 this.itemAdded.emit(item);
 }

 items:string[] =[];
}

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

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

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

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

<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 runtime.js polyfills.js scripts.js main.js > custom-items.js