1. 输入属性（Input Properties）： 通过在一个组件中定义输入属性，然后在另一个组件中通过这个输入属性进行数据传递。在被传递的组件中，可以使用 @Input 装饰器来声明输入属性。
// 在父组件中
@Component({
selector: 'app-parent',
template: '<app-child [data]="parentData"></app-child>'
})
export class ParentComponent {
parentData = 'Data from parent';
}
// 在子组件中
@Component({
selector: 'app-child',
template: '{{ data }}'
})
export class ChildComponent {
@Input() data: string;
}
2. 输出属性和事件（Output Properties and Events）： 通过在子组件中定义输出属性和事件，父组件可以监听这些事件并在相应的处理函数中获取数据。
// 在子组件中
@Component({
selector: 'app-child',
template: '<button (click)="sendData()">Send Data</button>'
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter<string>();
sendData() {
this.dataEvent.emit('Data from child');
}
}
// 在父组件中
@Component({
selector: 'app-parent',
template: '<app-child (dataEvent)="receiveData($event)"></app-child>'
})
export class ParentComponent {
receiveData(data: string) {
console.log(data); // 输出：Data from child
}
}
3. 服务（Services）： 使用服务可以在不同的组件之间共享数据和方法。服务是单例的，可以在整个应用程序中保持状态。
// 定义一个服务
@Injectable({
providedIn: 'root'
})
export class DataService {
private sharedData: string;
setSharedData(data: string) {
this.sharedData = data;
}
getSharedData(): string {
return this.sharedData;
}
}
// 在父组件中
@Component({
selector: 'app-parent',
template: '<button (click)="sendData()">Send Data</button>'
})
export class ParentComponent {
constructor(private dataService: DataService) {}
sendData() {
this.dataService.setSharedData('Data from parent');
}
}
// 在子组件中
@Component({
selector: 'app-child',
template: '{{ data }}'
})
export class ChildComponent {
data: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.data = this.dataService.getSharedData();
}
}
这些是一些基本的组件交互方式，你可以根据具体的场景和需求选择适当的方式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4912/Angular