在Angular 8中,可以使用@Input装饰器和@Output装饰器来实现组件之间的数据传递。
首先,假设我们有三个组件:父组件(ParentComponent)、子组件1(ChildComponent1)和子组件2(ChildComponent2)。
// ChildComponent1.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child1',
template: '{{ receivedData }}'
})
export class ChildComponent1 {
@Input() receivedData: string;
}
// ChildComponent2.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child2',
template: '{{ receivedData }}'
})
export class ChildComponent2 {
@Input() receivedData: string;
}
// ParentComponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
data = 'Hello Angular 8!';
}
在父组件的模板中,使用方括号语法将data属性绑定到子组件的receivedData属性上,从而将数据传递给子组件。
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ParentComponent } from './parent.component';
import { ChildComponent1 } from './child1.component';
import { ChildComponent2 } from './child2.component';
@NgModule({
imports: [BrowserModule],
declarations: [ParentComponent, ChildComponent1, ChildComponent2],
bootstrap: [ParentComponent]
})
export class AppModule { }
这样,数据就可以从父组件传递到子组件1和子组件2中了。