Question

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

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

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

我尝试使用消息服务来传输消息，例如“正在加载”。

<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>

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

serach组件中的功能如下：

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

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>

有人有什么想法吗？

Answer 1

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

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

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/sharing-data-between-angular-components-four-methods/

如何在Angular中未嵌套的组件之间设置或传递属性状态

1 个答案:

资源