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>

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

1 个答案: