Question

这些是我到目前为止所知道的唯一方法：

@输入/ @输出|这是为了让孩子与其父母沟通，反之亦然
@ViewChild |这是为了与子组件进行通信
@注射服务|与任何组件共享数据
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);
    }

}

Answer 1

@Injectable Service | share data with any component

，它会根据要求进行更改，但是对于一般服务，主要用于数据传输

角度2〜6：与“组件”通信的最有效方法是什么？

1 个答案: