来自函数的 routerLink 链接答案

【问题标题】：routerLink link from a function来自函数的 routerLink 链接
【发布时间】：2019-09-12 12:26:10
【问题描述】：

我的问题与this 非常相似，但对我不起作用。我已经问过发帖的人，但没有得到回复，所以我走了。我基本上想从一个函数生成链接：

generator(linkFor, linkPath){
    if (linkFor == 'msg'){
        // now linkPath is something like 2/4
        // and the route to read the message is message/view/2/4
        return 'message/view/' + linkPath
    }
}

并且 if 条件确实会继续。从我做的模板：

<a href="javascript:void(0)" [routerLink]="generator(data.type, data.source)">{{data.source_name}}</a>

现在正在生成链接但添加了（）：

message/view/(2/4)

因此，它无法找到。大括号是从哪里来的？

【问题讨论】：

data.source 的值是什么？
@porgo 在上面的条件下，例如，它将是“2/4”。它始终是一个字符串，并且取决于类型。有时它会是“4”，有时是“hello”，当然基于后端发送的 data.type
做一个console.log 在返回和发布之前检查linkPath 的实际值。
@Mic 我实际上已经这样做了，它给出了：message/view/3/45

标签： angular

【解决方案1】：

generator(linkFor, linkPath){
   if (linkFor == 'msg'){
      return ['message', 'view', linkPath]
   }
   return null;
}

【讨论】：

感谢您的帮助。尝试了你的方法，也让 linkPath 成为一个数组，所以它最后给出了 [message, view, 3,4] 但它仍然添加了 ()。让我反过来看

【解决方案2】：

上述逻辑的 [routerLink] 存在性能问题。有什么弊端让我先来

试试这个：

<a href="javascript:void(0)" [routerLink]="generator(data.type, data.source)">Test</a>

generator(linkFor, linkPath){
 console.log('Generate URL for me');
}

注意：现在检查控制台打印了多少次，原因是这个异步调用并被调用并降低了应用程序性能

所以这是我们可以从函数生成链接的另一种方式

<a href="javascript:void(0)" (click)="generator(data.type, data.source)">Test</a>

import { Router } from '@angular/router';

constructor(private _router: Router)

generator(linkFor, linkPath){
console.log('Generate URL for me');
  if (linkFor == 'msg'){
    this._router.navigate(['message/view/' + linkPath])
  }
}

注意：现在检查控制台日志只打印一次，这是实现从函数生成链接的更好性能方式。

简而言之，即使未执行用户操作，[routerLink] 异步调用也会以无穷大的方式命中函数。（点击）将仅根据用户操作起作用。

【讨论】：

感谢您让我大开眼界。我确实看到我的控制台打印了 3-4 次，但我不知道为什么，因为我的 ngFor 只有一条记录。你的解释很有道理。但遗憾的是，必须在 ngFor 上生成链接，而且我不知道必须（单击）哪个元素，因为链接是通过 Web 套接字或组件初始化。但我非常感谢您的解释。
请检查适用于 ngFor 的更新解决方案