别名组件

Question

我需要为公司的多项目定义一个共享的组件库。其中一些组件将取自角形材料。其他组件将是自定义组件。

为了保持清晰，我不想将某些<mat-xxx>组件与某些<acme-xxx>组件混合在一起。我希望所有组件都为<acme-xxx>，而不必重写角材料组件。

是否有一种简单的方法为这些组件添加别名？

我试图创建一个简单的组件，仅从角材料中扩展一个组件：

@Component({
  selector: '[acme-button]',
})
export class ButtonComponent extends MatButton {

}

但是编译器抱怨，因为我没有在@Component中提供模板。

  

错误：未为组件ButtonComponent指定模板。

Answer 1

我认为您最好的想法是创建自己的组件并将它们包装在Angular组件周围，例如对@Input和@Output绑定进行镜像，并在模板中包含Angular组件。

@Component({
  selector: '[acme-button]',
  template: `<mat-button></mat-button>'
})
export class ButtonComponent {

}