父子组件之间：
1. 通过输入属性（Input Properties）： 父组件可以通过在子组件上定义输入属性，将数据传递给子组件。
// 在父组件中
@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. 通过模板引用变量（Template Reference Variables）： 父组件可以在模板中使用模板引用变量，从而访问子组件的属性和方法。
<!-- 在父组件模板中 -->
<app-child #childRef></app-child>
<button (click)="passData(childRef)">Send Data</button>
// 在父组件中
export class ParentComponent {
passData(child: ChildComponent) {
console.log(child.data); // 访问子组件的属性
}
}
// 在子组件中
export class ChildComponent {
data = 'Data from child';
}
3. 通过服务（Service）： 父子组件都可以依赖于同一个服务，通过服务进行数据共享。
// 定义一个服务
@Injectable({
providedIn: 'root'
})
export class DataService {
private sharedData: string;
setSharedData(data: string) {
this.sharedData = data;
}
getSharedData(): string {
return this.sharedData;
}
}
// 在父组件中
export class ParentComponent {
constructor(private dataService: DataService) {}
passData() {
this.dataService.setSharedData('Data from parent');
}
}
// 在子组件中
export class ChildComponent {
data: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.data = this.dataService.getSharedData();
}
}
父指令与子指令之间：
1. 通过 @Input 属性： 如果你的指令具有输入属性，你可以在使用该指令的组件中通过输入属性传递数据。
2. 通过服务（Service）： 与组件类似，指令也可以通过共享服务来实现数据共享。
总的来说，选择何种方式取决于具体的需求和项目结构。使用输入属性是一种直接而清晰的方式，而服务则提供了更灵活的解决方案，尤其是在多层次的组件结构中。
转载请注明出处：http://www.zyzy.cn/article/detail/4914/Angular