问题描述:在Angular中,有时候我们需要从一个组件获取数据,但是遇到了无法获取数据的问题。
解决方法:
// 共享数据的服务
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private sharedData: any;
setSharedData(data: any) {
this.sharedData = data;
}
getSharedData() {
return this.sharedData;
}
}
// 组件1
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component1',
template: `
`
})
export class Component1 {
constructor(private dataService: DataService) {}
setData() {
const data = 'Hello from Component 1';
this.dataService.setSharedData(data);
}
}
// 组件2
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component2',
template: `
{{ getData() }}
`
})
export class Component2 {
constructor(private dataService: DataService) {}
getData() {
return this.dataService.getSharedData();
}
}
// 子组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child-component',
template: `
{{ data }}
`
})
export class ChildComponent {
@Input() data: any;
}
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
sharedData = 'Hello from Parent Component';
}
以上两种方法可以解决Angular无法从其他组件获取数据的问题。根据具体的场景和需求,选择适合的方法来获取数据。