- 通过输入型绑定把数据从父组件传到子组件。
- 父: <app-hero-child *ngFor="let hero of heroes" [hero]="hero" [master]="master"></app-hero-child>
- 子:
- }
- 通过setter截听输入属性值的变化(仅一个,待验证)
- 通过ngOnChanges()来截听输入属性值的变化(当需要监视多个、交互式输入属性的时候,本方法比用属性的setter更合适。)
- 父: <app-version-child [major]="major" [minor]="minor"></app-version-child>
- 子:<li >{{change}}</li>
- @Input()major:number;
- @Input()minor:number;
- ngOnChanges(changes:{[propKey:string]:SimpleChange}) { this.change = changees; }
- 子组件监视父组件中所传值的变化,父值变化子值会进行更新
- 父组件监听子组件的事件
- 父: <app-voter *ngFor="let voter of voters" [name]="voter" (onVoted)="onVoted($event)"></app-voter>
- 子:
- @Input()name:string;
- @Output()onVoted = new EventEmitter<boolean>();
- vote(agreed:boolean){
- this.onVoted.emit(agreed);
- this.voted= true;
- }
- 父组件与子组件通过本地变量互动(父组件不能直接访问子组件的属性和方法,但可通过本地变量进行访问)
- 父:
- 子:声明方法与属性
- 父:
- 父组件调用@ViewChild(): 通过本地变量父组件只能在模板中访问子组件的属性和方法,而无法通过类访问子组件
- 父:(视图同5)
- 子:同上
- 父:(视图同5)
- 父组件和子组件通过服务来通讯(子父组件同享一个服务,利用此服务来进行通讯)
- 在服务中定义方法与属性
- 父组件通过调用服务中的方法来修改共同的属性
- 动态组件加载
- 使用@Directive({ selector: '[ad-host]', })定义组件
- 与直接使用@ViewChild()加载的区别:在某个条件加载该组件