如何在Angular中未嵌套的组件之间设置或传递属性状态 [英] How to set or pass a property state between unnested component in Angular

问题描述

我使用Angular技术开发了一个Web应用程序.但是现在我遇到了一个问题，如何将一个组件中的属性传递或设置为另一个不是父子组件的组件.

I develop a web application with tech Angular. But now I am having a problem, how can I pass or set a property from a compoennt to the other component, which are not parent-child component.

详情: 我创建了一个名为Serach的组件，该组件中有一个按钮，如果单击此按钮，将调用一些REST API，并将等待从后端获取一些数据.通过调用此REST CALL，将在另一个名为Home的组件中显示"LOADING ....".

Detials: I have created a compoent called Serach, There is a button in this component, if this button is clicked, will call some REST APIs and will wait to get some data from backend. By calling this REST CALL, will in the other compoennt called Home show 'LOADING....'.

组件Search而不是HOME组件，而不是父子组件. 并且Search组件位于Header Component中，并且如果加载了Web应用，则会显示Home Component.这意味着，这两个组件将同时显示.

the component Search and the component HOME ist not parent-child component. and the Search compoent is in the Header Component, and Home Component will be shown, if the web app loaded. That means, that these 2 Components are be shown in the same time.

我尝试使用消息服务来传输消息，例如正在加载".

I have tried to use Message Service to transport a Message e.g. 'LOADING'.

<mat-sidenav-content>
    <div class="app-header">
      <app-header></app-header>
    </div>
    <div class="mat-sidenav-content">
      <main class="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
      </main>
    </div>
  </mat-sidenav-content>

搜索组件位于应用程序标头组件中.

Search component is located in app header component.

serach组件中的功能如下:

the function in serach component is as follows:

public search(): void {
    this.messageService.sendMessage("LOADING");
    this.loadData.loadData(this.key).subscribe(() => {
      this.router.navigate(['overview']);
    }
      , (error) => {
        this.openDialog();
      }
    ); 
  }

home.ts中的代码

the code in home.ts

export class HomeComponent implements OnInit {
  public message = [];
  subscription: Subscription;
  constructor(private messageService: MessageService,
    private router: Router) {
     this.subscription = this.messageService.getMessage().subscribe((message) => {
      this.message.push(message);
    });
  }
  ngOnInit() {
  }
}

和HTML代码:

<div *ngIf="message.includes('LOADING')">
  <app-loading></app-loading>
</div>

有人有什么想法吗?

推荐答案

要在没有父子关系的两个组件之间共享数据，可以使用您所解释的服务.在没有看到您的MessageService实施情况的情况下很难说出问题所在.

To share data between two components that don't have a parent child relationship you would use a service like you explained. It hard to tell what the issue is without seeing your MessageService implementation.

我确实汇总了一个简单的示例，您可以查看该示例并将其应用于您的情况.下面的链接提供了一些资源，以帮助说明Angular组件的交互作用和堆栈闪电问题，并以一个示例为例，其中我创建了一个LoadingService，类似于如何创建MessageService，类似于此...

I did throw together a simple example that you can review and apply to your situation. Linked below are a few resources to help explain Angular component interaction and a stackblitz with an example where I created a LoadingService similar to how you could create a MessageService, something similar to this...

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoadingService {

  private isLoadingSource: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public isLoading: Observable<boolean> = this.isLoadingSource.asObservable();

  constructor() { }

  set loading(value: boolean) {
    this.isLoadingSource.next(value);
  }
  
}

资源

https://stackblitz.com/edit/angular-gjpsgi

https://angular.io/guide/component-interaction

https://angularfirebase.com/lessons/在角组件之间共享数据的四种方法/

这篇关于如何在Angular中未嵌套的组件之间设置或传递属性状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！