Angular component comuniaction

Question

我需要有关角度分量通信的帮助。

我有家长部分和孩子。

在父组件中，我有列表。我想单击项目列表，然后将数据{name，text}移至子组件，并将其设置为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() { }

}

2. 使用Angular Services（当通信的组件直接相关时使用此方法）。但是从您的描述来看，使用角度服务可以更好地做到这一点。当您单击项目列表时，可以调用将数据推送到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")
  }

}