指令可以在同一个元素上设置另一个指令吗?
Can directive set another directives on the same element?
目的
我需要让我的对话框可以拖动。它们有很多,每个都是我设置样式等的自定义指令。
问题
我想知道是否有一个指令可以在该元素上应用另一个指令的选项?
代码
我的对话框大致是这样的:
<custom-dialog-container>
<custom-dialog-header>...</custom-dialog-header>
<custom-dialog-content>
...
</custom-dialog-content>
<custom-button>
...
</custom-button>
</custom-dialog-container>
和指令:
@Directive({
selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
@HostBinding('class') class = 'custom__dialog__header';
}
并且我希望该指令像 this 中那样从 cdk 应用 3 个可拖动指令 answear:
<h1 mat-dialog-title
cdkDrag
cdkDragRootElement=".cdk-overlay-pane"
cdkDragHandle>
Hi {{data.name}}
</h1>
是否可以使用自定义指令来实现?预先感谢您的帮助。
正如@TotallyNewb 所建议的那样,在发布此问题时可能无法通过其他指令将指令设置为 html 元素,但是 我想出了一个解决方案我的具体问题。这是代码,以防有人遇到类似情况。如果您有改进的想法,请随时更新此代码。
import { DragDrop } from '@angular/cdk/drag-drop';
import { Directive, ElementRef, HostBinding } from '@angular/core';
@Directive({
selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
@HostBinding('class') class = 'dialog__header';
constructor(
element: ElementRef<HTMLElement>,
dragDrop: DragDrop
){
let availablePanes = document.getElementsByClassName('cdk-overlay-pane');
let latestPane = availablePanes.item(availablePanes.length - 1);
let dragRef = dragDrop.createDrag(element);
dragRef.withRootElement(latestPane as HTMLElement);
}
}
目的
我需要让我的对话框可以拖动。它们有很多,每个都是我设置样式等的自定义指令。
问题
我想知道是否有一个指令可以在该元素上应用另一个指令的选项?
代码
我的对话框大致是这样的:
<custom-dialog-container>
<custom-dialog-header>...</custom-dialog-header>
<custom-dialog-content>
...
</custom-dialog-content>
<custom-button>
...
</custom-button>
</custom-dialog-container>
和指令:
@Directive({
selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
@HostBinding('class') class = 'custom__dialog__header';
}
并且我希望该指令像 this 中那样从 cdk 应用 3 个可拖动指令 answear:
<h1 mat-dialog-title
cdkDrag
cdkDragRootElement=".cdk-overlay-pane"
cdkDragHandle>
Hi {{data.name}}
</h1>
是否可以使用自定义指令来实现?预先感谢您的帮助。
正如@TotallyNewb 所建议的那样,在发布此问题时可能无法通过其他指令将指令设置为 html 元素,但是 我想出了一个解决方案我的具体问题。这是代码,以防有人遇到类似情况。如果您有改进的想法,请随时更新此代码。
import { DragDrop } from '@angular/cdk/drag-drop';
import { Directive, ElementRef, HostBinding } from '@angular/core';
@Directive({
selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
@HostBinding('class') class = 'dialog__header';
constructor(
element: ElementRef<HTMLElement>,
dragDrop: DragDrop
){
let availablePanes = document.getElementsByClassName('cdk-overlay-pane');
let latestPane = availablePanes.item(availablePanes.length - 1);
let dragRef = dragDrop.createDrag(element);
dragRef.withRootElement(latestPane as HTMLElement);
}
}