要将选择的值从一个组件传递到另一个组件,可以使用Angular的服务(service)来实现。
首先,创建一个名为DataTransferService
的服务:
import { Injectable } from '@angular/core';
@Injectable()
export class DataTransferService {
private selectedValue: any;
setSelectedValue(value: any) {
this.selectedValue = value;
}
getSelectedValue() {
return this.selectedValue;
}
}
然后,在选择值的组件中,将DataTransferService
注入并使用它来设置所选值:
import { Component } from '@angular/core';
import { DataTransferService } from './data-transfer.service';
@Component({
selector: 'app-select-component',
template: `
`,
})
export class SelectComponent {
constructor(private dataTransferService: DataTransferService) {}
selectValue(value: any) {
this.dataTransferService.setSelectedValue(value);
}
}
最后,在接收值的组件中,也将DataTransferService
注入并使用它来获取所选值:
import { Component } from '@angular/core';
import { DataTransferService } from './data-transfer.service';
@Component({
selector: 'app-receive-component',
template: `
Selected Value: {{ selectedValue }}
`,
})
export class ReceiveComponent {
selectedValue: any;
constructor(private dataTransferService: DataTransferService) {
this.selectedValue = this.dataTransferService.getSelectedValue();
}
}
确保在使用这些组件的模块中提供DataTransferService
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SelectComponent } from './select.component';
import { ReceiveComponent } from './receive.component';
import { DataTransferService } from './data-transfer.service';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, SelectComponent, ReceiveComponent],
providers: [DataTransferService],
bootstrap: [AppComponent],
})
export class AppModule {}
现在,当在SelectComponent
中选择一个值时,它将被存储在DataTransferService
中。在ReceiveComponent
中,可以获取该值并使用它来显示所选值。
请注意,这只是一种解决方法,你也可以使用其他方法来实现相同的目标,如通过路由参数或通过状态管理库(例如ngrx)来传递数据。