Question

我在angular5应用程序中使用角度材质库，但我不希望它的指令/组件/类名称在我的标记中，我更喜欢与外部库保持不可知。但是，我尝试过这样的事情：

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中使用过指令。

Answer 1

我不知道您能得到多少，但是您说过您正在使用一个属性，也许您想使用一个元素Test

Answer 2

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

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

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

2 个答案: