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

Question

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

但是，是否可以在自定义组件下自动构建库组件，或者是否可以用我们的选择器名称更改kendo或任何其他库组件选择器。寻找一些工具或功能，可以帮助我实现这一点。

Answer 1

在从PrimeNG组件库转移到材料库之后，必须手动重新实现每个组件实例，我们面临着完全相同的挑战。展望未来，我们希望尽可能多地将库组件从应用程序中分离出来，这样如果我们决定再次更改库，就会更容易替换。

其基本思想是创建一个应用程序组件，它将充当一个传递到库组件的组件，并且所有公开的功能都将在组件实现的接口中定义。

下面是一个(而不是)通用和简单的例子：

|-- 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>

如果需要替换或扩展组件，则对模块(例如导入库组件模块)、模板进行必要的更改，并确保组件仍然实现接口。