以编程方式从 Angular 2 中的 json 创建嵌套组件

Posted 2023-03-13

【中文标题】以编程方式从 Angular 2 中的 json 创建嵌套组件

【英文标题】：Creating nested components from json in angular 2 programatically

【发布时间】：2018-09-28 06:50:02

【问题描述】：

我正在创建一个下拉菜单，它可以有任何来自 json 的级别

    [
        name:'Hi',value:[],
        name:'Hello',value:[
            name:'Xoxo',value:[],
            name:'Yolo',value:[]
        ],
        name:'Hey',value:[],
        name:'Hola',value:[]
    ]

该值可以包含另一个 json 对象。现在我在角度 2 中执行此操作。 我尝试的是在打字稿代码中使用递归。

createDropdownhtml(links,menuText)
    this.html+='<clr-dropdown>';
    this.html+=` <button type="button" clrDropdownTrigger>`+menuText+`
            </button>`;
    this.html+='<clr-dropdown-menu *clrIfOpen>';
    for(let link of links)
        if(link.value.length==0)
            console.log(link.name+' not nested');
            this.html+='<button type="button" clrDropdownItem (click)="linkClicked($event)">'+link.name+'</button>'
        
        else
            console.log(link.name+' nested');
            this.createDropdownHtml(link.value,link.name);
        
    
    this.html+=`</clr-dropdown-menu>
    </clr-dropdown>`;

现在在@Component 模板中我写了html，但这只是将html 打印为字符串。

然后我尝试使用<div [innerHTML]="html"></div>，但没有渲染角度组件。

我的问题很简单。我想只使用一个 json 文件创建一个带有任意数量的嵌套下拉菜单的角度下拉菜单。由于我不能在 html 中进行递归，所以真的没有点击我将如何做到这一点。

【问题讨论】：

你可以尝试在 angular 中使用结构指令 ng-for 循环

*ngFor 的问题是它不能像递归一样再次生成组件。

好的，我明白了，你必须去创建动态组件

我已经使用ng-template创建了一个示例模板，请查看并回复

【参考方案1】：

在您的情况下，我们希望创建 ng-template 并使用 viewContainerRef 以编程方式添加它。我会根据你的 json 数组结构提供一个示例代码

HTML

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <ng-template #dropdownvalue>
    </ng-template>
  </ul>
</div>

<ng-template #dropdown let-data>
  <li><a (click)="call(data.link)">data.link</a></li>
</ng-template>

包含的 html 下拉菜单是 bootstrap

Ts

@ViewChild('dropdownvalue',read:ViewContainerRef) dropdownvalue : ViewContainerRef
  @ViewChild('dropdown') dropdown;

  data = [
        name:'Hi',value:[],
        name:'Hello',value:[
            name:'Xoxo',value:[name:'Hey',value:[name:'Hola',value:[]]],
            name:'Yolo',value:[]
        ],
        name:'Hey',value:[],
        name:'Hola',value:[]
    ]

    ngAfterViewInit()
      this.data.forEach((value,index)=>
        this.dropdownvalue.createEmbeddedView(this.dropdown,$implicit:link:value.name)
        if(value.value.length > 0)
          this.change(this.data[index])
        
      )
    

    change(data)
      data.value.forEach((value,index)=>
        this.dropdownvalue.createEmbeddedView(this.dropdown,$implicit:link:value.name)
        if(value.value.length > 0)
          this.change(data.value[index])
        
      )
    

为了更好的说明，请参阅演示link

【讨论】：

我想要嵌套下拉菜单之类的东西，比如如果我点击 Hello，那么它的嵌套值会出现在另一个下拉列表中。