Angular 5属性指令将mat-ripple添加到host元素

Question

如何将mat-ripple指令添加到我创建的自定义指令的host元素中？关键是要mat-ripple自动添加到我添加的任何元素my-custom-directive.

因此,如果我添加<button my-custom-directive>Button</button>到模板,它应该被渲染为,<button my-custom-directive mat-ripple mat-ripple-color="#000">Button</button> 而不必每次我使用时都输入所有这些my-custom-directive.作为一个例子,看看如何mat-raised-button工作.你只需添加该指令就mat-ripple可以了.我想用我自己的按钮复制它.

这不起作用.

HTML

<button my-custom-directive>Button</button>

指示

@Directive({
  selector: ['appMyCustomDirective']
})
export class MyCustomDirective implements AfterViewInit {
  constructor(
    private renderer: Renderer,
    private element: ElementRef
  ) { }

  ngAfterViewInit() {
    this.renderer.setElementAttribute(this.element.nativeElement, 'mat-ripple', '');
    this.renderer.setElementAttribute(this.element.nativeElement, 'mat-ripple-color', '#000000');
  }
}

我也试过注入MatRipple指令并调用MatRipple.launch(...)但是这会产生一个涟漪效应,它不会被限制在按钮内部,并且不会应用与mat-ripple通过模板直接添加到元素时相同的颜色.

Answer 1

我能够通过提供MatRipple指令并手动启动并结合某些样式来实现我的目标.

指示

@Directive({
  selector: '[app-outline-button]',
  providers: [ MatRipple ]
})
export class OutlineButtonDirective implements AfterViewInit {
  constructor(
    private ripple: MatRipple
  ) { }

  @HostListener('mousedown', [ '$event' ]) onmousedown(event) {
    this.ripple.launch(event.x, event.y);
  }
}

然后我必须给出按钮overflow: hidden;样式以防止波纹扩展到按钮之外.

最后使用我的指令自动神奇地包含mat-ripple指令:

<button app-outline-button>Button</button>