Angular：可移动对话标题为指令

Question

我想出了如何move a dialog。它或多或少是一个

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle >{{data.header}}</h1>

这意味着我必须添加

mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle

在每个对话框中。由于我很懒，我不想在我的代码中添加相同的代码。因此，我想将这4个指令（属性？）封装成一个单独的 - 例如moveable-dialog-title。我搜索了指令，但发现只有答案函数调用。

另外一个问题是关于造型。我可以使用qazxsw poi在css中设置标题样式当我有一个封装的指令时，每个指令的样式也是可能的吗？

Answer 1

@jitender的想法很棒。因此我简单地创建了一个组件

[mat-dialog-title] {..

而不仅仅是替换所需的HTML代码

  <h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle >
    <ng-content></ng-content>
  </h1>

同

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle >{{data.header}}</h1>