角度：可移动对话框标题为指令

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。我搜索了指令，但发现只回答函数调用。

其他问题与样式有关。我可以使用[mat-dialog-title] {..在CSS中设置标题的样式，当我具有封装的指令时，是否也可以为每个指令设置样式？

Answer 1

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

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

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

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

与

<app-moveable-dialog-header>{{data.header}}</app-moveable-dialog-header>