如何将数据从 app.component.ts 传递到 Angular 中的 app.module.ts？

Question

由于项目的要求，我需要将 app.component.ts 中的数据值dataOne发送到它的 app.module.ts 中，以便我可以将其存储在变量moduleValue中。 请参考下面的代码并建议如何在文件中实现这种数据传输。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'formcheck';

  dataOne: any;

  getValues(val: any) {
    console.warn(val);
    this.dataOne = val;
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

let moduleValue: any;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
  
}

Answer 1

但是，我建议您在服务中声明变量或可观察对象，因为您提到需要在相同的文件中执行此操作，您可能希望从组件中导出变量并将其导入模块，如下所示：

app.component.ts

export class AppComponent {
  title = 'formcheck';

  dataOne: any;

  getValues(val: any) {
    console.warn(val);
    this.dataOne = val;
    DATA = this.dataOne;
  }
}

export var DATA = '';

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DATA } from './app.component';

let moduleValue: any;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
  
}

Answer 2

这是使用服务的解决方案，我使用BehaviorSubject来动态更新价值。

https://stackblitz.com/edit/angular-9pitmh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.tsrc, 2Fdata.service.ts,src%2Fapp%2Fhello.component.ts