Angular2 指令监听父组件回调或更改

Posted 2023-03-13

【中文标题】Angular2 指令监听父组件回调或更改

【英文标题】：Angular2 directive listen to parent component callbacks or changes

【发布时间】：2017-11-27 06:28:51

【问题描述】：

我有一个 angular2/4 指令，我附加到输入 DOM 元素，它为它们添加一个类，标记它们不是空的。

@Directive(
    selector: '[inputNotEmptyAddClass]'
)
export class InputNotEmptyDirective implements OnInit 
...
@HostListener('change') onChange() 
        this.process();
    
...
process() 
[Add class to parent input element, when it has a value]

一切正常，直到我在节目中引入了一个日期选择器模块 (https://github.com/kekeh/mydatepicker)。这个模块创建了一个新组件，其中一个孩子是一个输入，整个事情让我选择一个日期。

我想在这里实现的目标：

我想重写我的指令以监听日期选择器的回调或订阅（我正在使用 RXjS）某些日期选择器变量。然而，我对如何正确实施这一点一无所知。

我尝试了什么？

我发现使用 ControlValueAccessor

constructor( @Inject(NG_VALUE_ACCESSOR) private _valueAccessor: ControlValueAccessor )

我可以检查一下，我的指令所连接的元素是否是日期选择器。

if ( this._valueAccessor[0].constructor.name == 'MyDatePicker' ) 

现在我可以看到它有 onChange 函数和所有变量，但我不知道如何订阅它们。

我也可以在我的指令中使用模块回调函数，但它们似乎没有被触发。有什么方法可以让它们触发吗？

onDateChanged(event: IMyDateModel) 
        // event properties are: event.date, event.jsdate, event.formatted and event.epoc
    

底线。

我愿意接受有关如何将指令挂钩到父元素变量和回调的任何线索或解决方案。我知道这是一个非常笼统的问题，但也许有人可以在这里为我指出正确的方向。

【问题讨论】：

很抱歉，您能在一行中说出您想要什么吗？你想对数据选择器的事件做什么

指令连接到 DOM 元素或某些组件。我希望能够订阅该元素或组件的属性更改，或者能够挂钩该组件的回调。

你试过@HostListener('dateChanged') 吗？

谢谢！就这么简单。不知何故，我没有想到这个解决方案。我认为回调是针对特定函数（如果存在）进行的，而不是触发事件。如果您创建一个答案，我可以将您标记为答案。您是否也知道我是否也可以订阅输入的值更改？

【参考方案1】：

你可以监听 input 派发的事件。如果是日期，则为 dateChanged，如果是常规输入，则为 change。

没有指令你可以说

<input type="text" (change)="doSomething()" />

// (dateChanged)="doSomething()" in case of date 

如果您在指令中包含它，您可以将HostListener 添加到它。

@HostListener('dateChanged') dateChange() 
     //  do something  

【讨论】：

既然我可以要求改进，我想知道指令是否可以订阅其父 DOM 元素属性的更改？这也是可能的吗？也许你也可以在你的答案中留下一行。这确实是有用的知识。