Angular2指令監聽父組件回調或更改

我有一個我創建的angular2/4指令，我附加到輸入DOM元素，它向它們添加了一個類，表明它們不是空的。Angular2指令監聽父組件回調或更改

@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）的一些datepickers變量。然而，我對如何正確實施這個想法沒有意見。

我試過了什麼？

我已經發現，使用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 
    }

底線。

我願意接受任何有關如何將指令掛接到父元素變量和回調函數的線索或解決方案。我明白這是一個非常普遍的問題，但也許有人可以在這裏指出我正確的方向。

來源

2017-06-23 Karl Johan Vallner

對不起，你能告訴一行你想要什麼。你想在數據選取器的事件上做什麼 – Skeptor

指令連接到DOM元素或某個組件。我希望能夠訂閱該元素或組件的屬性更改，或者能夠掛接到該組件上的回調。 –

你試過'@HostListener（'dateChanged'）'嗎？ – Skeptor

您可以收聽由輸入分派的事件。在日期dateChanged的情況下，在正常情況下輸入change。

沒有指令，你就可以說

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

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

如果在一個指令有它，你可以添加HostListener它。

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

來源

2017-06-24 11:29:56 Skeptor

由於我可以要求改進，我想知道一個指令是否可以訂閱對其父DOM元素屬性的更改？這也是可能的，也許你也可以在你的答案中留下一條線。這確實會有幫助。 –

Angular2指令監聽父組件回調或更改

回答

相關問題