Question

我有两个独立的组件;一个包含选择搜索框的标题组件，stats组件根据选择框的值显示结果，我想知道一旦选择框改变是否可以刷新结果，我想到使用{ {1}}但它似乎是一个懒惰的解决方案。

Answer 1

使用共享服务：

<强>服务

@Injectable()
export class MyService {
    myMethod$: Observable<any>;
    private myMethodSubject = new Subject<any>();

    constructor() {
        this.myMethod$ = this.myMethodSubject.asObservable();
    }

    myMethod(data) {
        console.log(data); // I have data! Let's return it so subscribers can use it!
        // we can do stuff with data if we want
        this.myMethodSubject.next(data);
    }
}

组件1（发件人）：

export class SomeComponent {
    public data: Array<any> = MyData;

    public constructor(private myService: MyService) {
        this.myService.myMethod(this.data);
    }
}

组件2（接收方）：

export class SomeComponent2 {
    public data = {};

    public constructor(private myService: MyService) {
        this.myService.myMethod$.subscribe((data) => {
                this.data = data; // And he have data here too!
            }
        );
    }
}

Check documentation!

Answer 2

最好的方法是将数据发送到组件。

使用@input属性将数据发送到控制器。然后实现ngOnChanges并执行加载数据的功能。

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
    selector: 'second-component',    
})

@Injectable()
export class SecondComponent implements OnChanges {

    @Input()
    selectValue: string;

    ngOnChanges(changes: SimpleChanges) {
           if (changes['selectValue']) {
             //call your function to load the data
           }
    }

}

用途

<second-component [selectValue]="bindYourValue"></second-component>

Answer 3

我认为最适合您的情况是使用service进行组件之间的通信。

查看Angular文档中的示例：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

从另一个角度4获取值

3 个答案: