用angular开发一个递归组件需求分析htmlts结语

什么叫递归组件，递归大家并不陌生，各种编程语言都有递归，那么能不能用angular里的组件里递归调用自身呢?
这种场景还是很多的，比如无限级分类等！
下面我们就来动手实践一下

需求分析

展示类似下面数据时必备

{
    title: 'nz-button',
    children: {
        title: 'nz-icon',
        children: {
            title: 'nz-button'
            ...
        }
    }
}

实现过程其实也很简单

html

<div class="father">{{_props?.title}}</div>
<!--注意这里的选择器-->
<div class="children" *ngIf="_props?.children" design-group-exta [props]="_props?.children"></div>

@Component({
  // 选择器需要特别注意
  selector: 'div[design-group-exta]',
  templateUrl: './design-group-exta.component.html',
  styleUrls: ['./design-group-exta.component.scss']
})
export class DesignGroupExtaComponent extends Iwe7DesignBase<any>{
    
}

结语

思想有多远，代码就能滚多远！再次感叹NG的强悍！写文章很累，转载记得注明出处！！谢谢！