有没有办法在 Angular 5 中轻松包装或扩展 Angular-material 指令？答案

【问题标题】：Is there a way to easily wrap or extend Angular-material directives in Angular 5?有没有办法在 Angular 5 中轻松包装或扩展 Angular-material 指令？
【发布时间】：2018-07-11 05:16:17
【问题描述】：

我在 angular5 应用程序中到处使用 angular-material 库，但我不希望它的指令/组件/类名称出现在我的标记中，我更愿意对外部库保持不可知论。但是，我尝试做这样的事情：

import { Directive, 
         ElementRef, 
         Renderer, 
         Renderer2 }  from "@angular/core";

import { MatButton }  from "@angular/material";
import { OnInit }     from "@angular/core";
import { Platform}    from "@angular/cdk/platform";
import {FocusMonitor} from "@angular/cdk/a11y";

@Directive({
  selector: '[my-button]'
})
export class MyButtonDirective extends MatButton {

  ngOnInit(): void {

  }

  constructor(renderer: Renderer2, elementRef: ElementRef, _platform: Platform, _focusMonitor: FocusMonitor) {
    super(renderer, elementRef, _platform, _focusMonitor);

  }
}

但是当我应用my-button 属性时，它似乎没有任何效果。即使来自指令构造函数/onInit 内部的console.logs 也不会打印。我不确定自己做错了什么，因为我以前从未在 Angular 中使用过指令。

【问题讨论】：

当你的指令有my-button 选择器时，你为什么要应用ubi-button 属性？
哦，抱歉，我是想输入我的按钮，我更改了这篇文章的前缀，但在这里输入了错误的前缀

标签： angular angular-material angular5 angular-directive

【解决方案1】：

我不知道你会走多远，但你说你正在使用一个属性，当你可能想使用一个元素测试时

【讨论】：

【解决方案2】：

您缺少模板。扩展只允许访问您的代码，但模板不会自动扩展。

这是类似的..当你为你的组件创建 npm 包时。您需要先导出类，然后再导出模板。

【讨论】：