在Angular 2中,要在另一个组件中显示函数中的数据,可以通过以下步骤实现:
下面是一个示例:
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private data: string;
getData(): string {
return this.data;
}
setData(data: string): void {
this.data = data;
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template: `
<h1>Data: {{ data }}</h1>
`,
})
export class Component1Component implements OnInit {
data: string;
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.data = this.dataService.getData();
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component2',
template: `
<h2>Data from Component 1: {{ data }}</h2>
`,
})
export class Component2Component implements OnInit {
data: string;
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.data = this.dataService.getData();
}
}
请注意,以上示例中的组件和服务需要在模块中进行声明和提供。具体的模块配置可以根据实际情况进行调整。
希望以上解答对您有帮助!如果您需要了解更多关于Angular 2的知识,可以参考腾讯云的Angular产品文档:Angular产品文档
领取专属 10元无门槛券
手把手带您无忧上云