Как обнаружить изменение в функции ввода углового сигнала?
У меня есть компонент, который принимает два входа: user и userList. Интересно, следует ли мне обнаружить изменение с помощью крючка жизненного цикла ngOnChanges? Какова наилучшая практика для этого?
// Note: Old approach
// @Input() user: User; // For editing a user
// @Input({ alias: "userList" }) _userList: User[] = [];
// @Output() addUser = new EventEmitter<User>();
// Note: New approach
user = input<User>();
_userList = input<User[]>([], { alias: "userList" });
addUser = output<User>();
constructor(private userService: UserService) { }
ngOnInit(): void {
this.getRoleList();
}
ngOnChanges(changes: SimpleChanges): void {
const { user, _userList } = changes;
console.info(changes);
if (user && user.currentValue) {
this.userModel = user.currentValue;
this.initializeForm(user.currentValue);
}
if (_userList) {
this.userList.set(_userList.currentValue);
}
}
Я попробовал перехват жизненного цикла ngOnChanges, и он работает нормально, но я не знаю, подходит ли он для моего компонента, основанного на сигналах, или нет.
Ответы 3
Для обнаружения изменений сигнала вы можете использовать effect().
https://angular.io/guide/signals#effects
Вот пример:
Новые входные сигналы, определяемые возвращаемыми сигналами signal() или signal.required().
Как и любой другой сигнал, вы можете использовать effect() для отслеживания и подписки на изменения, которые могут произойти.
effect(() => {
console.info(this.user);
// will be call when `this.user` changes
})
Существует также еще одна альтернатива, основанная на RxJS. Angular предоставляет взаимодействие для преобразования сигналов в наблюдаемые с помощью функции toObservable().
toObservable(this.user).subscribe((newUser) => /* when user changes */);
Привет, Матье. Как я могу присвоить новое значение моей сигнальной переменной, когда мой входной сигнал изменится? Я знаю, что мы не можем использовать эффект
Вероятно, вам придется использовать эффект и включить запись сигнала.
«Избегайте использования эффектов для распространения изменений состояния», — говорится в документации Angular. Вы можете прочитать примеры использования метода effect() и многое другое здесь
Computed() идеально подходит для отслеживания изменений. Вот простой пример:
ТС:
someDataToKeepTrack = input.required<number>();
//Whenever someDataToKeepTrack field updates, someRelatedData will be re-computed
someRelatedData = computed( () => {
console.info('Data has changed. Here is the new value : ' + this.someDataToKeepTrack() )
return this.someDataToKeepTrack() * 2;
} );
HTML:
<p> Here is updated-data: {{someRelatedData() }} </p>
Где мы называем компонент — HTML:
<some-component [someDataToKeepTrack] = "inputData"></some-component>
<input type = "text" name = "inputData" [(ngModel)] = "inputData" />
Где мы называем компонент — TS:
inputData = 10; //Initial Data
input() возвращает сигнал. Вы можете использовать этот сигнал для отслеживания обновлений.