Question

我目前正在尝试在Angular 5中创建一个可以从数据库加载的菜单。现有菜单看起来像这样：

<ul class="nav navbar-nav" style="padding-top: 14px;">
   <li [routerLinkActive]="['link-active']" *ngIf="isAdmin">
       <a [routerLink]="['/fetch-data']">
          <i class="fa fa-snowflake-o"></i>
          <div>Fetch data</div>
       </a>
   </li>
</ul>

我还没有加载数据 - 我试图证明它可以先做我想做的一切。

我已经创建了一个组件，我打算为其构建菜单。我希望做的是生成现有菜单的所有当前行为，但是从我的组件中生成。那段代码在这里：

import { Component, Input, Renderer2, ElementRef, OnInit } from "@angular/core";

@Component({
    selector: "my-menu",
    template: ""
})
export class MyMenuComponent implements OnInit {

    constructor(private readonly renderer: Renderer2, private readonly el: ElementRef) { }

    ngOnInit() {
        const ul = this.renderer.createElement("ul");
        this.renderer.addClass(ul, "nav");
        this.renderer.addClass(ul, "navbar-nav");
        this.renderer.addClass(ul, "navbar-padding");

        const li = this.renderer.createElement("li");
        this.renderer.setAttribute(li, "routerLinkActive", "link-active");

        const a = this.renderer.createElement("a");
        this.renderer.setAttribute(a, "routerLink", "/fetch-data");

        const i = this.renderer.createElement("i");
        this.renderer.addClass(i, "fa");
        this.renderer.addClass(i, "fa-birthday-cake");
        this.renderer.appendChild(a, i);

        const div = this.renderer.createElement("div");
        const text = this.renderer.createText("Fetch data");
        this.renderer.appendChild(div,text);
        this.renderer.appendChild(a, div);

        this.renderer.appendChild(li, a);
        this.renderer.appendChild(ul, li);

        this.renderer.appendChild(this.el.nativeElement, ul);
    }

}

问题在于，当我生成routerLinkActive和routerLink属性时，它们实际上并不起作用。也就是说，它们还没有作为角度属性处理。如何让它们被识别为角度属性，这样当我点击它们时，它会带我到正确的路线？

在Angular 5中使用Renderer2输出角度指令

0 个答案: