在Angular中,可以通过使用服务来将数据传递给共享模块。下面是一个包含代码示例的解决方法:
// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: [],
exports: []
})
export class SharedModule { }
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SharedService {
public sharedData: any;
constructor() { }
}
// sender.component.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';
@Component({
selector: 'app-sender',
template: `
`
})
export class SenderComponent {
constructor(private sharedService: SharedService) { }
sendData() {
this.sharedService.sharedData = 'Hello, World!';
}
}
// receiver.component.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';
@Component({
selector: 'app-receiver',
template: `
{{ receivedData }}
`
})
export class ReceiverComponent {
public receivedData: any;
constructor(private sharedService: SharedService) {
this.receivedData = this.sharedService.sharedData;
}
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { SharedService } from './shared/shared.service';
import { SenderComponent } from './sender.component';
import { ReceiverComponent } from './receiver.component';
@NgModule({
imports: [
BrowserModule,
SharedModule
],
declarations: [
SenderComponent,
ReceiverComponent
],
providers: [
SharedService
],
bootstrap: [SenderComponent, ReceiverComponent]
})
export class AppModule { }
现在,当点击发送数据按钮时,发送组件会将数据存储在共享服务的共享变量中,并且接收组件会从共享服务获取该数据并显示在页面上。