Angular 组件通信

Posted 2023-02-23

【中文标题】Angular 组件通信

【英文标题】：Angular component comuniaction

【发布时间】：2020-08-14 23:43:50

【问题描述】：

我需要有关角度组件通信的帮助。

我有父组件和子组件。

在父组件中我有列表。我想单击项目列表并将数据 name, text 移动到子组件并将其设置为 froala 编辑器所在的子组件。

【问题讨论】：

从这里开始：angular.io/guide/component-interaction

这太宽泛了。请更具体。

【参考方案1】：

在 Angular 中，有两种方法可以实现组件互通。

使用输入绑定将数据从父级传递给子级

@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 服务（当通信的组件直接相关时使用此方法）。但是根据您的描述，您可以通过角度服务做得更好。单击项目列表时，可以调用将数据推送到 BehaviourSubject 的服务函数。之后，所有订阅该 Behavior 主题的组件都将获取您传递的数据。

@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")