时间戳

首页 > 解决方案 > 如何在 Angular 中的未嵌套组件之间设置或传递属性状态

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

问题描述

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

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

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

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

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

有人有什么想法吗？

标签： angulartypescript

解决方案

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

我确实整理了一个简单的示例，您可以查看并应用于您的情况。下面的链接是一些资源，可帮助解释 Angular 组件交互和 stackblitz 示例，其中我创建了一个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/

推荐阅读