Angular：可移动对话框标题作为指令答案

【问题标题】：Angular: Movable Dialog title as DirectiveAngular：可移动对话框标题作为指令
【发布时间】：2019-07-07 02:58:41
【问题描述】：

我想出了如何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 中设置标头样式当我有一个封装指令时，是否也可以为每个指令设置样式？

【问题讨论】：

【解决方案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>

【讨论】：