以下是一个解决方法,展示了如何在Angular 8中收集和共享数据选择。
首先,在app.module.ts中导入所需的模块和服务:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
接下来,在data.service.ts中创建一个数据服务,用于收集和共享数据:
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private selectedData: any = null;
setSelectedData(data: any) {
this.selectedData = data;
}
getSelectedData() {
return this.selectedData;
}
}
然后,在app.component.ts中使用数据服务来收集和共享数据:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
Data Collection and Sharing
Selected Data:
{{ selectedData }}
`,
styles: []
})
export class AppComponent {
data: string;
selectedData: any;
constructor(private dataService: DataService) { }
collectData() {
this.dataService.setSelectedData(this.data);
this.selectedData = this.dataService.getSelectedData();
}
}
最后,在app.component.html中添加app-root组件,以在浏览器中显示结果:
这样当用户在输入框中输入数据并点击"Collect Data"按钮时,数据将被收集并共享到selectedData变量中,并在页面上显示出来。