Angular 8：通过本地服务在单独模块中的组件之间传递数据

Posted 2023-02-23

【中文标题】Angular 8：通过本地服务在单独模块中的组件之间传递数据

【英文标题】：Angular 8: passing data via local service between components in seperated modules

【发布时间】：2020-06-06 15:54:33

【问题描述】：

我有这个本地服务

  private messageSource = new BehaviorSubject('default message')
  public currentMessage = this.messageSource.asObservable();

  constructor()  

  changeMessage(message: string) 
    this.messageSource.next(message)
  

核心模块内的子组件

@Output('message') message= new EventEmitter<string>()
@Output('movies') movies =new EventEmitter<any>()
storedmovies:any
  constructor(private localService: LocalService, private movieService: MoviesService)  

  ngOnInit() 
    this.movieService.getStoredMovies().subscribe(data=>
      this.storedmovies=data
    )
    this.localService.currentMessage.subscribe(data=>console.log(data))

  

sendMessage()
  this.message.emit(this.storedmovies);

子 thtml

<button class="btn btn-danger" (click)="sendMessage()">Send Message</button>

管理模块内的管理组件

TS

 ngOnInit() 
    this.localService.currentMessage.subscribe(data=>console.log(data))
    console.log(this.localService.changeMessage('new message'))
  
  receivedMessage($event) 
    console.log($event)
  

HTML

<app-child
(message)="receivedMessage($event)"> -> not recognized

但是在孩子注册的 appModule 中，将它放在导出数组中

@NgModule(
  declarations: [
    //etc
    ChildComponent,
  ],
  imports: [
    /etc
  ],
  exports:[
    ChildComponent
  ],

那么我需要做什么才能在管理模块中识别子组件？我需要导入组件吗？我已经试过了，还是不行……

【问题讨论】：

child-component 在core-moduel 中，因此您必须将core-module 添加到app.module.ts 一次，然后您才能在 app.module.ts 中访问您的子组件。

【参考方案1】：

根据您在问题中提供的模块结构，我理解这个想法是：

改为在其模块 (CoreModule) 中声明和导出您的子组件 应用程序模块。

然后将此模块导入Admin模块。

我创建了this example，您可以在其中看到它正在工作。 https://stackblitz.com/edit/angular-ebetqi

Angular 文档非常好，看看这两个与模块相关的资源以及如何构建它们...

https://angular.io/guide/architecture-modules https://angular.io/guide/styleguide#application-structure-and-ngmodules

【讨论】：

谢谢，就是这样，进口/出口混乱