[Angular] Write Compound Components with Angular’s ContentChild
Allow the user to control the view of the toggle component. Break the toggle component up into multiple composable components that can be rearranged by the app developer.
Compound component mainly for rendering flexibility. It hides the implements detial from users, but users can freely re-order the child component order or add new component into it.
In this post we are looking into how to apply "@ConetentChild" to do compound components.
This is not a recommended way, just for learning!
So a highlevel compound component looks like:
<toggle (toggle)="onToggle($event)"> <toggle-button></toggle-button> <toggle-on>On</toggle-on> <toggle-off>Off</toggle-off> </toggle>
For the parent component 'toggle' component, the job for it is hide implement details from the consumers. It handles the internal state. Which means 'toggle' component needs to access the state of its Children components.
<toggle-button></toggle-button> <toggle-on>On</toggle-on> <toggle-off>Off</toggle-off>
The way to can accomplish it is using '@ContentChild':
@ContentChild(ToggleOnComponent) toggleOn: ToggleOnComponent;
@ContentChild(ToggleOffComponent) toggleOff: ToggleOffComponent;
@ContentChild(ToggleButtonComponent) toggleButton: ToggleButtonComponent;
Listen for Child component's ouput event:
toggle-button component has Output event call 'toggle':
@Component({ selector: 'toggle-button', template: '<switch [on]="on" (click)="onClick()" ></switch>', }) export class ToggleButtonComponent { @Input() on: boolean; @Output() toggle: EventEmitter<boolean> = new EventEmitter(); onClick() { this.on = !this.on; this.toggle.emit(this.on); } }
Then we can listen the Output event in 'ngAfterContentInit()' lifecycle hooks.
ngAfterContentInit() { this.toggleButton.toggle.subscribe(on => { this.on = on; this.toggle.emit(on); this.update(); }); }
Also 'toggle' component will take care to update Children components state:
update() { this.toggleOn.on = this.on; this.toggleOff.on = this.on; this.toggleButton.on = this.on; }
相关文章
- [Angular] Lazy Load CSS at runtime with the Angular CLI
- [Angular 8] Calculate and Measure Performance budgets with the Angular CLI
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Angular Directive] 3. Handle Events with Angular 2 Directives
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 2] Passing Observables into Components with Async Pipe
- [Angular 2] WebStorm - Managing Imports
- [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
- [Angular-Scaled web] 3. Basic State with ui-router
- [ngx-formly] Use 3rd party Form Controls with Angular Formly / Custom type
- [Angular] Lazy Load CSS at runtime with the Angular CLI
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular2 Form] Display Validation and Error Messaging in Angular 2
- [Angular 2] Understanding OpaqueToken
- [Angular 2] Rendering an Observable with the Async Pipe
- [AngularJS] Angular 1.3 ng-model-options - getterSetter
- [Unit Testing] Karma with Angular mocks
- Chrome扩展应用Angular state inspector的使用方法
- Angular.js 页面里的按钮点击事件处理
- Angular 内容投影 content projection 关于选择器问题的单步调试
- Angular 项目中的可摇树依赖 - Tree-shakable dependencies