Angular二次封装组件参数透传

青旅半醒 2023-01-17 09:27 130阅读 0赞

由于Angular 组件的输入输出属性有着严格的校验，而且不允许像React组件一样支持解构来传递`props`,比如

只能尴尬的一个个来写对应属性，而对于二次封装一些组件的话就意味着有些`Input`要写两遍，封装的组件中定义一遍`Input`然后在使用被封装组件时在挨个赋值写一遍，很烦~所以暂时想到了一种只定义一遍的方案（更好的方案还没想到，有更好的欢迎指出），大致思路就是利用 `ViewChild`获取子组件（被封装的组件），将然后直接遍历对象属性`key`赋值。

**DEMO**

> html

<nz-range-picker #rangePicker [ngModel]="value"></nz-range-picker>

> ts

export class AntDateRangeComponent implements ControlValueAccessor, OnInit, OnChanges, AfterViewInit {
    
        _currentValue: Date[] = [];
    
        // 获取子组件
        @ViewChild('rangePicker', { static: false })
        rangePicker: NzRangePickerComponent;
    
        @Input()
        set value(value) {
            this._currentValue = value;
        }
        get value() {
            return this._currentValue;
        }
        @Output() valueChange = new EventEmitter<Date[]>();
    
        ngOnChanges(changes) {
            // 监听属性变化透传赋值
            const antKeys = Object.keys(changes).filter(key => key.indexOf('nz') === 0);
            if (antKeys.length) {
                this.copyAttribute(this, this.rangePicker, antKeys);
            }
        }
    
        ngAfterViewInit() {
            // 子组件渲染（能够获取子组件对象）后透传赋值
            this.copyAttribute(this, this.rangePicker);
        }
    
        // 赋值工具函数
        copyAttribute(origin, target, updateKeys: string[] = []) {
            // blackList 跳过，避免直接透传，用于想要封装的属性，由组件接管处理后传入
            const blackList = ['nzOnCalendarChange'];
            if (!target) {
                return;
            }
            if (updateKeys.length) {
                updateKeys.forEach(key => {
                    if (key.indexOf('nz') === 0 && !blackList.includes(key)) {
                        target[key] = origin[key];
                    }
                });
            } else {
                Object.keys(origin).forEach(key => {
                    if (key.indexOf('nz') === 0 && !blackList.includes(key)) {
                        target[key] = origin[key];
                    }
                });
            }
        }
    
    
        // .... 其他自定义操作
    
    }