В Angular общение между родителями и детьми является важным аспектом создания сложных интерактивных приложений. Это позволяет данным и событиям передаваться между компонентами, обеспечивая беспрепятственную координацию и сотрудничество. В этой статье мы рассмотрим различные методы установления связи между родительскими и дочерними компонентами в Angular, а также приведем примеры кода, иллюстрирующие их использование.

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

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="parentData" (event)="handleEvent($event)"></app-child>
  `
})
export class ParentComponent {
  parentData: string = 'Hello from parent!';
  handleEvent(event: string) {
    console.log('Received event from child:', event);
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ data }}</p>
    <button (click)="emitEvent()">Send Event to Parent</button>
  `
})
export class ChildComponent {
  @Input() data: string;
  @Output() event: EventEmitter<string> = new EventEmitter<string>();
  emitEvent() {
    this.event.emit('Hello from child!');
  }
}

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

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child #child></app-child>
    <button (click)="invokeChildMethod()">Invoke Child Method</button>
  `
})
export class ParentComponent {
  @ViewChild('child') child: ChildComponent;
  invokeChildMethod() {
    this.child.childMethod();
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `...`
})
export class ChildComponent {
  childMethod() {
    console.log('Child method invoked!');
  }
}

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

// Communication Service
@Injectable()
export class CommunicationService {
  private messageSource: BehaviorSubject<string> = new BehaviorSubject<string>('');
  message$: Observable<string> = this.messageSource.asObservable();
  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}
// Parent Component
@Component({
  selector: 'app-parent',
  template: `...`
})
export class ParentComponent {
  constructor(private communicationService: CommunicationService) {}
  sendMessageToChild() {
    this.communicationService.sendMessage('Hello from parent!');
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `...`
})
export class ChildComponent {
  constructor(private communicationService: CommunicationService) {}
  ngOnInit() {
    this.communicationService.message$.subscribe(message => {
      console.log('Received message from parent:', message);
    });
  }
}

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

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