Angular 2~6：与“组件”通信的最有效方式是啥？

Posted 2023-02-23

【中文标题】Angular 2~6：与“组件”通信的最有效方式是啥？

【英文标题】：Angular 2~6: What is the most efficient way to communicate with "Components"?Angular 2~6：与“组件”通信的最有效方式是什么？

【发布时间】：2018-12-10 13:43:55

【问题描述】：

目前我只知道这些方法：

@输入/@输出 |这是为了让孩子与父母交流，反之亦然 @ViewChild |这是为了和子组件通信 @Injectable 服务 |与任何组件共享数据 rxjs/behaviorsubject |与任何组件共享数据

我还看到了一个@Injectable 组件示例，但我不确定这是否也是共享组件数据的一种方式。

好的，所以我希望上面的文字足够清晰，以便大家能够理解我要去哪里。我需要最有效和最干净的方式来与任何组件共享组件变量和方法，而不必造成大混乱并看到性能下降。

我正在考虑使用以下方式共享数据，但我不确定这在拥有多个组件时是否有效：

家长

import  Component, OnInit, ViewChild, AfterViewInit  from '@angular/core';
import  ChildComponent  from './child/child.component';

@Component(
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.scss']
)
class ParentComponent implements OnInit, AfterViewInit 
    public instance: ParentComponent;
    @ViewChild(ChildComponent) childComponent;

    constructor() 
        this.instance = this;
    

    doSomethingWithParentMethod(strData: string) 
        console.log('parent data: ' + strData);
    

    ngOnInit(): void 
    

    ngAfterViewInit() 
        this.childComponent.doSomethingMethod('pass data to child in string type');
    

在父 HTML 文件中：

<app-child [parent]="instance"></app-child>

孩子

@Component(
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss']
)
class ChildComponent 
    @Input() parent;

    public function doSomethingMethod(strData: string) 
        console.log('child data: ' + strData);
    

【参考方案1】：

@Injectable Service | share data with any component

根据需求变化，但通用服务主要用于数据传输

【讨论】：

我想在单击父 html 按钮元素时使用来自其他组件的方法。我知道这可以通过 (click)="fireMethod()" 实现，但是在父方法内部，我希望能够触发子方法，反之亦然。