Question

我写了一条指令，该指令在任何组件上添加一个HostListener（在本例中为“ focus”）。每当元素处于焦点位置时，伪指令应在其宿主组件上调用方法。

<my-component myDirective>
    <h3>Hello World</h3>
</my-component>

<my-other-component myDirective>
    <button>Hello</button>
</my-other-component>

myDirective中的HostListener

@HostListener('focus')
onFocus() {
    this.myService.myStream$
        .pipe(first())
        .subscribe((value => {
            this.myHostComponent.doSomeMagic(value);
        }))
}

由于它应该在每个组件上都可以使用，因此我只希望在组件中实现doSomeMagic()方法，并让myDirective与HostListener和observable一起工作。

有没有一种方法可以在指令主机上调用方法而又不知道它实际上是哪个组件？

Answer 1

您可以使用注入的组件来做到这一点：

directing.ts这样的事情应该起作用：

constructor(private myHostComponent: MyComponent) {}

...

this.myHostComponent.doSomeMagic(value);

您将必须知道组件tho的类型。

我相信，如果您要制作并提取所有doSomeMagic()组件将要从中扩展的组件，那么它可能会起作用：

constructor(private myHostComponent: MyAbstractComponent) {}

class MyAbstractComponent() { abstract doSomeMagic(); }

我不确定抽象部分，您需要检查它是否有效。

编辑：

您还可以通过指令输入将引用传递给组件/元素。这是一个快速的StackBlitz：

https://stackblitz.com/edit/angular-playground-anhhhc?file=app/directive.ts

Answer 2

我将使用@Output进行操作，并发出类似以下的内容：

@Directive({ selector: '[myFocusDirective]' })
export class FocusDirective {
@Output() myFocusDirective = new EventEmitter<MouseEvent>(); 

constructor(private elementRef: ElementRef) {}

@HostListener('focus')
onFocus() {
    this.myService.myStream$
        .pipe(first())
        .subscribe((value => {
            this.myFocusDirective.emit(value);;
        }))
}

然后组成

<input (myFocusDirective)="openDropdown()" type="text" />

使用指令扩展Angular组件

2 个答案: