Question

我正在使用数据服务在组件之间共享数据。但是，这对我来说似乎不起作用。

从这里得到了参考资料

Angular to update UI from the child component reflect the value to the parent component https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

我尝试了与上面相同的逻辑，但似乎对我不起作用。

这是角度材质的html绑定

<mat-progress-bar mode="indeterminate" *ngIf="commonViewModel.showProgressBar()"></mat-progress-bar>

父组件

export class AppComponent {
constructor(public commonViewModel: CommonViewModel) {    }
ngOnInit() {
        this.isLoding();
    }
isLoding() {
        console.log("app=" + this.commonViewModel.showProgressBar());
        return this.commonViewModel.showProgressBar();
    }
}

子组件

export class HomeComponent {
    private GetHomeItemUrl: string = "Home/GetHomeItem";
    private _homeItemService: GenericHttpClientService;
    constructor(public commonViewModel: CommonViewModel) {
        this.getHomeItemHttpCall();
    }

    private getHomeItemHttpCall(): void {

        this.commonViewModel.setProgressBarShow = true;
        this._homeItemService.GenericHttpGet<GenericResponseObject<HomeViewModel>>(this.GetHomeItemUrl).subscribe(data => {
            if (data.isSuccess) {
                this.commonViewModel.setProgressBarShow = false;
                console.log("home=" +this.commonViewModel.showProgressBar());
            }

        }, error => {
            console.log(error);
        });
    }
}

这是我的服务类，它将值保存为true和false

@Injectable()
export class CommonViewModel {
    progressBarShow: boolean = true;

    public showProgressBar(): boolean {
        return this.getProgressBarShow;
    }

    set setProgressBarShow(flag: boolean) {
        this.progressBarShow = flag;
    }
    get getProgressBarShow(): boolean {
        return this.progressBarShow;
    }
}

控制台输出

在控制台I中，可以看到输出为 True 和 False 。但该应用程序永远不会隐藏，因为我可以看到应用程序组件值始终 true

我在哪里，我做错了。可以请有人让我知道。我，不想使用输入和输出来共享数据。

请告诉我如何解决此问题。

Answer 1

您的父组件和子组件可能会注入两个不同的服务实例，具体取决于您“提供”它的位置。尝试从您的应用模块中提供它。

此外，如果孩子是父母的直接孩子，你不需要服务，你可以在孩子身上有一个EventEmitter（@Output），并通过它进行交流。

请参阅https://angular.io/api/core/EventEmitter

上的文档

Answer 2

我认为，GSSWain的答案必须是有效的。如果没有，请尝试使用getter

<mat-progress-bar *ngIf="isLoading"></mat-progress-bar>

get isLoading(){
    return this.commonViewModel.showProgressBar();
}

组件与数据服务之间的数据共享不工作在角度5

2 个答案: