Angular 5属性指令将材质波纹添加到主体元素

如何将

mat-ripple

指令添加到已创建的自定义指令的主机元素中？关键是让

mat-ripple

自动添加到我添加的任何元素

my-custom指令中

因此，如果我将
按钮
添加到模板中，它应该呈现为
按钮
，而不必每次使用
我的自定义指令
时都键入所有内容。作为一个例子，我们来看看
mat提升按钮的工作原理。只需添加该指令，就可以得到
mat-ripple
。我想用我自己的按钮复制它

这不管用

HTML

按钮

指令

@指令({
选择器：['appMyCustomDirective']
})
导出类MyCustomDirective实现AfterViewInit{
建造师(
私有渲染器：渲染器，
私有元素：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
时相同的颜色。
我能够通过在指令中提供
矩阵，并结合一些样式手动启动来实现我的目标

指令

@指令({
选择器：“[应用程序大纲按钮]”，
提供者：[矩阵]
})
导出类OutlineButtonDirective在ViewInit之后实现{
建造师(
私人涟漪：MatRipple
) { }
@mousedown（事件）上的HostListener（'mousedown'，['$event']）{
this.ripple.launch（event.x，event.y）；
}
}

然后我不得不给按钮
overflow:hidden样式以防止波纹扩展到按钮之外

最后要使用我的指令，它自动神奇地包括mat ripple指令：

按钮
我能够通过在指令中提供
矩阵
并结合一些样式手动启动来实现我的目标

指令

@指令({
选择器：“[应用程序大纲按钮]”，
提供者：[矩阵]
})
导出类OutlineButtonDirective在ViewInit之后实现{
建造师(
私人涟漪：MatRipple
) { }
@mousedown（事件）上的HostListener（'mousedown'，['$event']）{
this.ripple.launch（event.x，event.y）；
}
}

然后我不得不给按钮
overflow:hidden样式以防止波纹扩展到按钮之外

最后要使用我的指令，它自动神奇地包括mat ripple指令：

按钮