Angular 6中的组件重新绑定可以通过以下几种方法来实现:
// 父组件
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
parentData: string = '初始数据';
updateParentData() {
this.parentData = '更新后的数据';
}
}
// 子组件
@Component({
selector: 'app-child',
template: `
{{ data }}
`
})
export class ChildComponent {
@Input() data: string;
}
import { Subject } from 'rxjs';
// 父组件
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
data$ = new Subject();
updateData() {
this.data$.next('更新后的数据');
}
}
// 子组件
@Component({
selector: 'app-child',
template: `
{{ data }}
`
})
export class ChildComponent {
@Input() data: string;
}
import { ChangeDetectorRef } from '@angular/core';
// 父组件
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
data: string = '初始数据';
constructor(private cdr: ChangeDetectorRef) {}
updateData() {
this.data = '更新后的数据';
this.cdr.detectChanges();
}
}
// 子组件
@Component({
selector: 'app-child',
template: `
{{ data }}
`
})
export class ChildComponent {
@Input() data: string;
}
这些方法可以根据具体的需求和场景选择使用,以实现组件重新绑定的效果。