Javascript 如何在Angular 2中使用routerlink动态生成html元素

我有如下的自参考模型

export class Entity {
    constructor(public id: number,public name: string,public children: Entity[]) {
    }
}

我想创建一个树列表，每个树项目都有一个routerlink

我编写了一个递归函数，它使用RouterLink生成所有节点。之后，我将生成的最终html添加到master

元素中。我正在使用JQuery来完成这项工作

这是Ngonit函数

 ngOnInit() {
    this.entityTree = this.fileOrganizationPlan.getEntityTree();
    let $body = $('.FileOrganizationPlan', this.el.nativeElement); //this is master <ul> element
    let html = { value: '' };
    this.generateNavScript(this.entityTree, html);
    $body.append(html.value);
  }

ngOnInit（）{
this.entityTree=this.fileOrganizationPlan.getEntityTree（）；
让$body=$（'.FileOrganizationPlan'，this.el.nativeElement）；//这是master
元素
让html={值：'}；
this.generateNavScript（this.entityTree，html）；
$body.append（html.value）；
}

这是一个递归函数，用于生成树项

 generateNavScript(entityTree: Entity[], html) {

    for (let index = 0; index < entityTree.length; index++) {
      let entity = entityTree[index];
      html.value += `<li> <a  routerLink="/file-organization-plan/` + entity.id + `" >    </i> ` + entity.name + `</a>`;

      if (entity.children) {
        html.value += `<ul>`;
        this.generateNavScript(entity.children, html);
        html.value += `</ul>`;
      }

      html.value += `</li>`;

    }
  }

generateNavScript（entityTree:Entity[]，html）{
for（让index=0；index`+entity.name+`；
if（实体子实体）{
html.value+=`
`；
this.generateNavScript（entity.children，html）；
html.value+=`
`；
}
html.value+=``；
}
}

---

出现树项目，但路由不起作用。我猜angular不知道这个routerLink指令，因为我在渲染后添加了它。也许我遗漏了什么，但我没能抓住要点。那么，如何做到这一点呢？

正如您所猜测的，您无法动态添加routerLink—为时已晚

我将研究创建一个导航组件来替换generateNavScript函数

在该组件中，执行创建链接模型所需的任何操作（可能使用generateNavScript函数的修改版本）。这个模型应该是一个简单的列表

---

然后，在组件的模板中，使用ngFor迭代列表并创建routerLink

，正如您所猜测的，您无法动态添加routerLink-为时已晚

我将研究创建一个导航组件来替换generateNavScript函数

在该组件中，执行创建链接模型所需的任何操作（可能使用generateNavScript函数的修改版本）。这个模型应该是一个简单的列表

---

然后，在组件的模板中，使用ngFor迭代列表并创建路由链接

我通过检查最初在模板内创建的链接的最终编译解决了相同的问题

例如，这：

<a [routerLink]="['/classes', name ]"></a>

因此，在附加html时，可以在组件上包含编译版本，如下所示：

generateNavScript(entityTree: Entity[], html) {

    for (let index = 0; index < entityTree.length; index++) {
      let entity = entityTree[index];
      html.value += `<li> <a  ng-reflect-router-link="/file-organization-plan, ` + entity.id + `" href="/file-organization-plan/`  + entity.id + `">    </i> ` + entity.name + `</a>`; 

      if (entity.children) {
        html.value += `<ul>`;
        this.generateNavScript(entity.children, html);
        html.value += `</ul>`;
      }

      html.value += `</li>`;

    }
  }

generateNavScript（entityTree:Entity[]，html）{
for（让index=0；index`；
if（实体子实体）{
html.value+=`
`；
this.generateNavScript（entity.children，html）；
html.value+=`
`；
}
html.value+=``；
}
}

我通过检查最初在模板内创建的链接的最终编译，解决了相同的问题

例如，这：

<a [routerLink]="['/classes', name ]"></a>

因此，在附加html时，可以在组件上包含编译版本，如下所示：

generateNavScript(entityTree: Entity[], html) {

    for (let index = 0; index < entityTree.length; index++) {
      let entity = entityTree[index];
      html.value += `<li> <a  ng-reflect-router-link="/file-organization-plan, ` + entity.id + `" href="/file-organization-plan/`  + entity.id + `">    </i> ` + entity.name + `</a>`; 

      if (entity.children) {
        html.value += `<ul>`;
        this.generateNavScript(entity.children, html);
        html.value += `</ul>`;
      }

      html.value += `</li>`;

    }
  }

generateNavScript（entityTree:Entity[]，html）{
for（让index=0；index`；
if（实体子实体）{
html.value+=`
`；
this.generateNavScript（entity.children，html）；
html.value+=`
`；
}
html.value+=``；
}
}

实际上，首先我喜欢这样做。但在这种情况下，问题是我不知道实体模型树中存在多少层。所以我应该循环实体[]数组和实体。子对象[]以及实体。子对象[0]。子对象[]我也应该循环其子对象。事情是这样的。事实上，我不能用ngFor做这件事。我建议您在组件中使用递归函数来构建树，然后遍历它以从中构建数组。然后在你的网络中使用这个数组，实际上我是这样做的。但在这种情况下，问题是我不知道实体模型树中存在多少层。所以我应该循环实体[]数组和实体。子对象[]以及实体。子对象[0]。子对象[]我也应该循环其子对象。事情是这样的。事实上，我不能用ngFor做这件事。我建议您在组件中使用递归函数来构建树，然后遍历它以从中构建数组。然后在您的NGF中使用该数组，这很可能是整版重新加载这很可能是整版重新加载