如何在Angular 2中動態地使用routerlink生成html元素

我有如下的自引用模型。如何在Angular 2中動態地使用routerlink生成html元素

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

我想創建一個樹列表，每個樹項目都有一個路由器鏈接。

我寫了一個遞歸函數，它用routerlinks生成所有節點。之後，我添加了我生成的最終html，以便掌握<ul>元素。我正在使用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>`; 

    } 
    }

樹項出現，但路由不起作用。我猜角度不知道這個routerLink指令，因爲我在渲染後添加。也許我錯過了一些東西，但我無法理解這一點。那麼，如何做到這一點？

來源

2017-04-25 BlackEagle

正如你猜測的那樣，你不能動態添加routerLink - 這太遲了。

我會研究創建一個導航組件來替換您的generateNavScript函數。

在該組件內部，執行您需要執行的任何操作來創建鏈接模型（可能使用generateNavScript函數的修改版本）。這個模型應該是一個簡單的列表。

然後，在組件的模板，使用ngFor遍歷列表和創建

來源

2017-04-25 16:40:39 GreyBeardedGeek

其實第一次我喜歡這樣。但在這種情況下，問題是我不知道實體模型樹中存在多少層。所以我應該循環Entity []數組和Entity.Children []也如果存在Entity.Children [0] .Children []我應該循環也爲他們的孩子。它是這樣的。實際上，我無法用ngFor來做到這一點。 – BlackEagle

對。我建議您在組件中使用遞歸函數來構建樹，然後遍歷它以從中構建一個數組。然後在你的ngFor中使用該數組 – GreyBeardedGeek

我已經通過檢查最初創建的模板中的鏈接的最後彙編解決同樣的問題routerLinks。

例如，這樣的：

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

    } 
    }

來源

2017-09-11 18:53:00

如何在Angular 2中動態地使用routerlink生成html元素

回答

相關問題