用我们自己的角度分量封装现有的角度库组件吗？

Question

这是我的问题。我想用我的组件封装剑道角度组件。例如，kendo-button组件称为my-button。我们正在尝试创建选择器，以便即使将来将来使用其他库更改kendo时，也不会影响开发中的现有组件，因为它们将使用自定义包装器组件。当然，您可以手动创建包装器组件。

但是可以在我们的自定义组件下自动架设一个库组件，还是可以使用我们的选择器名称更改kendo或任何其他库组件选择器。寻找一些可以帮助我实现这一目标的工具或功能。

Answer 1

从PrimeNG组件库移至Material库后，必须手动重新实现每个组件实例，我们面临着完全相同的挑战。展望未来，我们希望尽可能地将库组件与应用程序分离，以便如果我们决定再次更改库，则将更易于替换。

一般的想法是创建一个应用程序组件，该组件将用作传递给库组件的直通组件，所有公开的功能都将在该组件实现的接口中进行定义。

下面是一个（通用）简单的例子：

|-- Components
     |-- button
          |-- button.component.css
          |-- button.component.html
          |-- button.component.ts
          |-- button.model.ts
          |-- button.module.ts

组件文件是使用CLI生成的标准文件。 .model.ts文件包含组件的接口，.module.ts文件包含也使用CLI生成的角度模块。

button.component.html

<button (click)="clicked()"><i [ngClass]="icon"></i>{{text}}</button>

button.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { IButton } from './button.model';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit, IButton {

  @Input() text: string;
  @Input() icon: string;

  @Output() clickEvent: EventEmitter<void> = new EventEmitter<void>();

  constructor() { }

  ngOnInit() {
  }

  clicked(): void {
    this.clickEvent.emit();
  }

}

将所有输入和输出（尽可能一般地定义）作为组件（以及将来的任何实现）将需要实现的接口。这样可以确保组件的功能始终保持不变。

button.model.ts

import { EventEmitter } from '@angular/core';

export interface IButton {
    text: string;
    icon: string;
    clickEvent: EventEmitter<void>;
}

声明并导出模块中的组件。

button.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button.component';

@NgModule({
  declarations: [
    ButtonComponent
  ],
  imports: [
    CommonModule,
    // component module imports here
  ],
  exports: [
    ButtonComponent
  ]
})
export class ButtonModule { }

遵循上述方法意味着您只需要导入模块就可以引用您应用程序中的组件，而您从不直接引用库组件。

<app-button [text]="'export'" [icon]="'fas fa-file-export'" (clickEvent)="doSomething()"></app-button>

如果需要替换或扩展组件，请对模块进行必要的更改（例如，导入库组件模块），模板，并确保该组件仍实现该接口。