Angular 9: обновление одного компонента из другого стало проще

Метод 1: привязка ввода и вывода
Один из самых простых способов обновления компонента из другого компонента — использование привязок ввода и вывода. Входные привязки позволяют передавать данные из родительского компонента в дочерний компонент, а выходные привязки отправляют события из дочернего компонента в родительский компонент.

Пример:
В HTML-шаблоне родительского компонента:

<app-child [inputData]="parentData" (outputEvent)="handleEvent($event)"></app-child>

В файле TypeScript дочернего компонента:

@Input() inputData: any;
@Output() outputEvent: EventEmitter<any> = new EventEmitter<any>();
// Trigger the event
emitEvent() {
   this.outputEvent.emit(someData);
}

Метод 2: ViewChild
Декоратор ViewChild предоставляет способ доступа к дочерним компонентам непосредственно из родительского компонента. Это позволяет вам вызывать методы или получать доступ к свойствам дочернего компонента и соответствующим образом обновлять его.

Пример:
В файле TypeScript родительского компонента:

@ViewChild(ChildComponent) childComponent: ChildComponent;
updateChildComponent() {
   this.childComponent.someMethod();
}

Метод 3: Angular Services
Angular Services действуют как центральный узел связи между компонентами. Вы можете создать службу для хранения общих данных или состояния и использовать ее для обновления компонентов по мере необходимости.

Пример:
В служебном файле:

@Injectable()
export class DataService {
   private dataSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
   public data$: Observable<any> = this.dataSubject.asObservable();
   updateData(data: any) {
      this.dataSubject.next(data);
   }
}

В файле TypeScript родительского компонента:

constructor(private dataService: DataService) {}
updateChildComponent() {
   this.dataService.updateData(someData);
}

В файле TypeScript дочернего компонента:

constructor(private dataService: DataService) {}
ngOnInit() {
   this.dataService.data$.subscribe((data) => {
      // Update child component based on received data
   });
}

Обновление одного компонента из другого компонента в Angular 9 может быть достигнуто с помощью различных методов, таких как привязки ввода и вывода, ViewChild и сервисы Angular. Каждый метод предлагает свой подход в зависимости от требований вашего приложения. Используя эти методы, вы можете создавать более интерактивные и динамичные приложения Angular.