Блог

Привет, у меня есть родительский компонент, который позволяет выбирать разные поля. Я использую селектор даты nz-zorro и выбираю компоненты. Например, дата из селектора даты, пара строк из выпадающих полей выбора и т.д. Я понял, что вы можете использовать событие субъекта для внесения изменений во входные данные дочерних компонентов при вызове любого из обратных вызовов отдельных селекторов полей.

Мне кажется, что создание события / ввода / вывода для каждой переменной — это повторяющийся шаблон, которого можно избежать, сопоставив все эти поля, которые меня интересуют, с одной моделью.

Тогда возникает мой вопрос: как мне синхронизировать изменения с любым полем модели в одной функции или способом вставки без кода….

 var1DateEvent: Subject <Date> = new Subject <Date>();
var2StringEvent: Subject <string> = new Subject <string>();
 

Вместо того, чтобы

 onvar1Change(){ this.var1DateEvent.next(this.ngModelDate)}
onvar2Change(){ thos.var2StringEvent.next(this.ngModelString)}
 

Где переменные модели — это модели, сопоставленные с моими компонентами пользовательского интерфейса, а onvar1Change() — это обратный вызов, сопоставленный с этим элементом пользовательского интерфейса, дочерний компонент подписывается на эти входные данные, наблюдаемые внутри его файла инициализации.

Что я хотел бы сделать, так это иметь пользовательскую модель, в которой есть все эти изменяемые поля, и всякий раз, когда изменяется какое-либо поле модели, пользовательский интерфейс отправляет дочернему компоненту событие всей модели. Мне кажется, что это лучший шаблон, но я не уверен, как это сделать, поскольку я новичок в Angular.

Если у вас есть родительско-дочернее отношение в вашем компоненте, нет необходимости использовать subject observable , я предлагаю вам использовать @Input и @Output для синхронизации изменений в вашем дочернем компоненте

1. сначала в вашем родительском компоненте создайте переменную:

 var1DateEvent:any;
 

2. В вашем HTML-файле, в котором вы вызываете дочерний компонент, вставьте этот код:

    <your-app-selector-name [var1DateEvent]="var1DateEvent" ></your-app-selector-name
    

3. В вашем дочернем компоненте поместите:

 @Input() var1DateEvent;
 

и вызовите ngOnChanges() :

 ngOnChanges(){
console.log('changes from parent component',var1DateEvent);
}
 

также вам необходимо импортировать входные данные из :
импортируйте { Component, OnInit ,Input } из ‘@angular/core’;

Я надеюсь, что это поможет вам, спасибо