Question

当我将一些 routerLinks 硬编码到我的应用程序中时，它工作正常，例如

<a class="nav-item nav-link active" routerLink="/home">Home</a>

但如果我执行以下操作，routerLinks 会工作，但每次浏览我的应用时都会刷新页面：

查看：

<ul class="list navbar-nav"></ul>

Ts.file

public links = [
    {
      name: "Home",
      route: "/home"
    },
    {
      name: "page",
      route: "/page"
    }
  ];

  public looper = () => {
    let items = "";
    for (let i = 0; i < this.links.length; i++) {
      items += `<a class="nav-item links mr-4 mt-2" href=""${
        this.links[i].route
      }" routerLink="${this.links[i].route}">${this.links[i].name}</a>`;
    }
    return items;
  };

  public insertLinks = () => {
    let target = document.querySelector(".list");
    target.innerHTML = this.looper();
  };

  ngOnInit() {
    this.insertLinks();
  }
}

我知道这可能不是 Angualr 的工作方式，但它每次刷新的原因是什么？

Answer 1

我认为从 template 的角度来看这可能更好。我认为这可能更适合你。使用 ngFor 迭代您的链接并将值绑定到 routerLink。应避免从组件类访问 DOM。

<ng-container *ngFor="let l of links;">
    <a class="nav-item nav-link active" [routerLink]="l.route">{{ l.name }}</a>
</ng-container>

对象数组中的角度路由链接无法按预期工作

1 个答案: