Question

我有如下的自我指涉模型。

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

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

我编写了一个递归函数，它使用routerlinks生成所有节点。之后我添加了我为主<ul>元素生成的最终html。我正在使用JQuery来执行此操作。

这是ngOnInit函数。

 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);
  }

这是生成树项的递归函数。

 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>`;

    }
  }

树项目出现但路线无效。我想angular不知道这个routerLink指令，因为我在渲染后添加了。也许我错过了一些东西，但我无法理解这一点。那么，这样做的方法是什么？

Answer 1

正如你猜测的那样，你无法动态添加routerLink - 为时已晚。

我会研究创建一个导航组件来替换你的generateNavScript函数。

在该组件内部，执行您需要做的任何事情来创建链接模型（可能使用generateNavScript函数的修改版本）。这个模型应该是一个简单的列表。

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

Answer 2

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

例如，这个：

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

编译到：

<a ng-reflect-router-link="/classes,name" href="/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>`;

    }
  }

如何在Angular 2中动态生成带有routerlink的html元素

2 个答案: