Angular: название подвижного диалога в качестве директивы - PullRequest
Новая
       6

Angular: название подвижного диалога в качестве директивы

0 голосов
/ 13 февраля 2019

Я понял, как переместить диалоговое окно .Это более или менее 

<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.Я искал директивы, но нашел только ответы на вызовы функций.

Дополнительный вопрос касается стиля.Я могу стилизовать заголовок в css с помощью [mat-dialog-title] {.. Когда у меня есть инкапсулированная директива, возможно ли также стилирование для каждой директивы?

1 Ответ

0 голосов
/ 13 февраля 2019

Идея @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>
...