在Angular中,父子组件之间共享数据有多种方法。以下是一种常见的解决方法:
在父组件中,使用@Input装饰器将数据传递给子组件:
// 父组件
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
parentData: string = 'Hello from parent';
// ...
}
在子组件中,使用@Output装饰器将数据传递回父组件:
// 子组件
@Component({
selector: 'app-child',
template: `
{{ data }}
`
})
export class ChildComponent {
@Input() data: string;
@Output() dataEvent: EventEmitter = new EventEmitter();
sendData() {
this.dataEvent.emit('Hello from child');
}
// ...
}
创建一个服务,用于在父子组件之间共享数据:
// 数据共享服务
@Injectable()
export class DataService {
private data: string;
setData(data: string) {
this.data = data;
}
getData() {
return this.data;
}
}
在父组件中,将数据保存到服务中:
// 父组件
@Component({
selector: 'app-parent',
template: `
`,
providers: [DataService]
})
export class ParentComponent {
constructor(private dataService: DataService) {}
sendData() {
this.dataService.setData('Hello from parent');
}
// ...
}
在子组件中,从服务中获取数据:
// 子组件
@Component({
selector: 'app-child',
template: `
{{ data }}
`,
providers: [DataService]
})
export class ChildComponent {
data: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.data = this.dataService.getData();
}
// ...
}
这些是Angular中父子组件之间共享数据的两种常见方法。你可以根据具体的需求选择适合你的方法。
上一篇:Angular 5多重输入验证
下一篇:Angular 5管道不执行