时间戳

首页 > 解决方案 > 如何通过服务在组件之间共享数据？

angular11 - 如何通过服务在组件之间共享数据？

问题描述

我在组件之间共享信息时遇到问题。我想要做的是，在home.component.html生成的数据中显示about.component.ts. 操作是：通过 abutton中的home.component.htmla ，调用 中home.component.ts的函数，该函数调用 的函数，该函数从获取数据about-service.ts的 中收集数据。about.component.htmlabout.component.ts

这是我的home.component.html：

<button mat-menu-item (click)="goToAbout()">
     <mat-icon svgIcon="logoBN"></mat-icon>
      Acerca
</button>

这是我的home.component.ts：

import { AboutComponent } from '../about/about.component';

 export class HomeComponent {
 public aboutInfo: AboutService;

 goToAbout() {
      .subscribe(emitData =>
 }

}

从goToAbout()函数中home.component.ts我需要从函数中获取aboutBuild()数据about.component.ts：

这是我的about.component.ts：

import { AboutService } from '';
    export class AboutComponent {
        ngOnInit() {
          }

        aboutBuild() {
              ......code.........
        }
    }

这是我的about.component.html：

<header class="title-color" fxFlex>Build Info</header>

我在服务中创建了一个函数来尝试通信两个组件。

about-service.ts：

observer = new Subject();

public subscriber$ = this.observer.asObservable();

emitData(aboutBuild) {
    this.observer.next(aboutBuild);
}

但是我无法访问 的aboutBuild()功能，about.component.ts我需要在 中包含什么service来通信这两个组件？

标签： angular11

解决方案

AboutService 很好，您有一个公共订阅者和一个触发事件的功能。

你的 goToAbout() 在home.component.ts：

export class HomeComponent {
  constructor(public aboutService: AboutService) {}
   
  goToAbout() {
     let data = {key: 'value'};
     this.aboutService.emitData(data);
  }
}

然后你的about.component.ts：

export class AboutComponent {
   constructor(public aboutService: AboutService) {}
    
    ngOnInit() {
        this.aboutService.subscriber$.subscribe(data => {
             this.aboutBuild(data);
        });
    }

    aboutBuild(data) {
          console.log(data)
    }
}

推荐阅读