Angular компонент связи

Question

Мне нужна помощь по поводу angular связи компонентов.

У меня есть родительский компонент и дети.

В родительском компоненте у меня есть список. Я хотел бы щелкнуть список элементов и переместить данные {имя, текст} в дочерний компонент и установить его для дочернего компонента, в котором находится редактор froala.

Answer 1

В Angular существует два способа реализации взаимодействия компонентов.

1. Передача данных от родителя к потомку с привязкой ввода

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})

export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

Использование Angular Служб (этот метод используется, когда компоненты, которые взаимодействуют, напрямую связаны). Но из того, что вы описываете, вы можете сделать это лучше с услугой angular. Когда вы щелкаете список элементов, вы можете вызвать функцию служб, которая передает данные в объект BehaviourSubject. После этого все компоненты, которые подписаны на эту тему поведения, получат данные, которые вы передали.

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}