使用Angular元素库编写Web组件。

Angular元素库使开发人员可以使用Angular构建Web组件并将它们打包成自定义元素，这使得它们可以在任何页面上使用，而无需使用整个Angular应用程序。

先安装@angular/elements库：

npm install --save @angular/elements

在Web组件中引入此库，并按照Angular元素库的指导创建组件：

import { Component, Input, OnInit, Output, EventEmitter, Inject } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'my-app',
  template: '...',
})
export class MyComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

}

// 打包该组件成自定义元素
const MyElement = createCustomElement(MyComponent, {injector: this.injector});

// 将自定义元素注册到浏览器中
customElements.define('my-element', MyElement);

将创建的组件打包成ngx-build-plus之后，即可在另一个Angular版本的任何页面上使用该自定义元素。

注意：该自定义元素需要将打包生成的js文件导入到页面中。