在Angular 2中,可以使用服务来传递数据给组件。以下是一个示例解决方法:
首先,创建一个名为data.service.ts的服务文件,其中定义一个名为DataService的类:
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private data: string;
constructor() {
this.data = "Hello from DataService!";
}
getData(): string {
return this.data;
}
setData(newData: string): void {
this.data = newData;
}
}
然后,在组件中注入DataService,并使用它来获取和设置数据。以下是一个名为data.component.ts的组件文件的示例代码:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-data',
template: `
Data Component
{{ data }}
`,
providers: [DataService]
})
export class DataComponent {
data: string;
constructor(private dataService: DataService) {
this.data = this.dataService.getData();
}
updateData(): void {
this.dataService.setData("New data from DataComponent");
this.data = this.dataService.getData();
}
}
在组件的模板中,可以使用插值表达式{{ data }}
来显示从服务获取的数据,并使用按钮的点击事件调用updateData方法来更新数据。
最后,在应用的主模块中声明并使用DataComponent。以下是一个名为app.module.ts的示例代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataComponent } from './data.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, DataComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,当应用启动时,将会显示DataComponent,并从DataService获取数据并显示在页面上。通过点击按钮,可以更新数据,并且数据也会在页面上更新。