Можно ли передавать данные после инициализации компонентов?
У меня есть три компонента, как показано на изображении ниже, и я использую пользовательский компонент формы в своем функциональном компоненте. Однако между этими двумя компонентами нет прямой связи родитель-потомок, и между ними также существует компонент формы.
Я передаю данные из функции в форму, используя свойство @Input, которое имеет входные значения внутри данных конфигурации (скажем, «configData»), а затем передаю их в пользовательский компонент через свойство @Input (скажем, «configData.test» для тестового ввода) без каких-либо проблем. (Я могу передать каждый параметр при инициализации пользовательского компонента). Однако после инициализации, когда я устанавливаю значение конфигурации, которое может быть передано при инициализации, оно не обнаруживается пользовательским элементом управления. Я также пытался использовать сеттер для этого ввода, как показано ниже, и ждал изменений в методе ngOnChanges. Я не уверен, можно ли обновить это значение, если нет прямой связи родитель-потомок, но я избегаю использования службы в повторно используемом пользовательском компоненте. Итак, каково решение? Должен ли я использовать BehaviourSubject и передавать значение через службу?
обычай-component.ts:
private _test: string;
@Input() set test(value: string) {
this._test = value;
};
get test() { return this._test; }
ngOnChanges(changes: SimpleChanges) {
console.info(changes);
console.info(this.test);
}
Вот структура моих компонентов:
Извините, я неправильно объяснил, это также передается в конфиге через @Input(), то есть от первого компонента ко второму и от второго к третьему компоненту данные передаются через @Input(). Итак, как я могу поймать входное значение после инициализации компонентов?
Входные данные должны обновляться, когда происходят изменения исходного значения, поэтому по своей сути оно должно передаваться вниз. Изменили ли вы стратегию обнаружения изменений в каком-либо из ваших компонентов, т. к. это может повлиять на то, как обновления происходят/проходят через компоненты.
Спасибо за помощь, ни на одном из моих компонентов нет стратегии обнаружения. Проблема, похоже, связана с некоторыми пунктами ответа Мошезавра. Я думаю, что могу исправить, следуя этим предложениям. С уважением.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я правильно понимаю, ваш configData является объектом, и вы обновляете только некоторые его свойства - если это так, вы должны знать, что angular будет срабатывать только при изменении ссылки на этот объект.
Если это действительно так, вы можете преодолеть это одним из следующих способов:
- воссоздавать объект
configDataкаждый раз, когда вы хотите его изменить —configData = { ...configData, newProp: newPropValue };Angular поймет, что это новый объект, и обновит соответствующие входные данные - вы можете добавить хук жизненного цикла DoCheck — он запускается каждый раз, когда Angular запускает обнаружение изменений — так что помните, что это будет срабатывать намного чаще
- передавать входные неизменяемые переменные вместо изменяемой - вместо того, чтобы передавать
configDataкак объект, передавать свойства объекта - Зарегистрируйтесь с наблюдаемым, который будет запускать каждый раз
configDataизменения, а затем соответствующим образом обновите свой компонент.
Очень полезные предложения, большое спасибо, проголосовал. Я думаю, что вариант 1 кажется мне подходящим. Но я не уверен, как я могу обновить значение currentProp с помощью оператора распространения или т. д. Не могли бы вы также добавить его в свой ответ?
С другой стороны, для пользовательского компонента, я думаю, было бы лучше также использовать вариант 4, но я не уверен, как зарегистрироваться в обсервале. Не могли бы вы опубликовать пример, чтобы я мог установить значение mat-autocomplete (filteredOptions) в соответствии с примером на этой странице. Вы можете взглянуть на файлы html и ts первого примера на этой странице.
@Fredrick для варианта 4 вам придется использовать сервис, вот пример - stackoverflow.com/questions/56714969/…
Большое спасибо, кажется, очень полезно. Но я просто задаюсь вопросом: на изображении выше, чтобы излучать из пользовательского компонента в функциональный, мне нужно сначала излучать в компонент формы? И тогда я должен испускать из метода во втором компоненте, вызывая этот метод? Я имел в виду, что первый компонент передает метод во второй компонент, а затем я передаю событие из этого метода в третий компонент?
С другой стороны, возможно ли скопировать значение конфигурации внутри конфигурации с помощью оператора распространения? Или он используется только для добавления нового элемента в массив?
если вы делаете configData = {...configData }, вы создаете новый объект с теми же реквизитами
Что, если просто обновить configData.propertyX, сохранив текущие значения, например. configData.propertyY и configData.propertyZ?
если вы посмотрите на то, что я написал в варианте 1 — вы получите тот же объект, но newProp получит новое значение newPropValue — даже если это свойство уже существовало в configData (оно переопределяется, если вы пишете его точно так же)
Похоже, проблема может быть связана с использованием конфигурации, а затем @Input(). Есть ли причина, по которой первые отношения также не используют @Input()?