从 Angular 8 中的 Href 或 RouterLink 调用函数

Question

我正在研究一个角度库项目。 我在库中有一个按钮，单击该按钮会触发输出事件。 我的图书馆消费者接收此输出并将用户重定向到另一个页面。

有一个变化希望我们右键单击按钮并在新选项卡功能中打开。 我已将按钮更改为标签，现在我正在通过标签中的 (click) 处理输出事件，我也想在标签的 href 上调用 showDetails() 函数。

我的库的 Html 不起作用：

 <a href="{{javascript: showDetails()}}"  (click)="showDetails()">

.ts 库代码

@Output() showDetailRequested = new EventEmitter<MouseEvent>();
    showDetails() {
        this.showDetailRequested.emit();
      }

库消费者 Html 代码

 <lib-comp (showDetailRequested)="onShowDetailRequested()"></lib-comp>

库 ts 代码

onShowDetailRequested() {
  this.router.navigateByUrl(`balh/${this.blah.blahId}`);
  }

}

我真的不能做这样的事情

<a class="nav-link" [routerLink]="['/somepath']" (click)="showDetails()">Home</a>

因为这个路径是未知的，当我的库的用户收到从 showDetails 方法触发的输出时，我们就会知道这个路径。

我试过下面一个，但它也不起作用

<a routerLink="{{showDetails()}}"   (click)="showDetails()">

我可以在这个https://stackblitz.com/edit/angular-click-before-routing-jdufpb?file=src%2Fapp%2Fapp.component.html 中获得一些帮助

Answer 1

请注意，在您的代码中，您已经像这样指定了它， routerLink只是普通的routerLink ，其中没有任何括号[routerLink]即使您正在调用一个函数，因此，当您检查地址[routerLink]时，您的 url 是这样的： /log%28'second'%29因为它虽然log('second')是一个字符串并且不应该用

<a routerLink="log('second')" (click)="log('second');">Second</a>

如果您使用方括号[]以这种方式使用它，您必须确保您的log函数返回 routerLink 重定向到的路径

<a [routerLink]="log('second')" (click)="log('second');">Second</a>

在你的组件中，你可以像这样：

log(text: string) {
  ...

  return text;         // or any path, you want to return
}

但同样如下所述，为单个元素调用两次函数是非常昂贵的。 您可以选择以下替代方案

---

示例#1

如果你想在重定向到特定路由之前执行一些逻辑，你可以像这样实现它：

成分

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


@Component({...})
export class AppComponent {

  constructor(private router: Router) {}

  log(text: string) {
    console.log(text);
    this.clickVal = text;

    this.router.navigate([text]);          // Add Router Navigate on this line and your 'text' parameter as it's route to redirect to
  }
}

模板

....

<a (click)="log('second');">Second</a>        // Just (click), avoid putting [routerLink] and (click) as you can perform the redirection inside your click function

笔记：

• 如果您将href放在您的锚标记中，它将很难重新加载页面，因此您的clickVal将不再被打印。 相反，统一设置锚标签的样式，即没有任何href锚标签

---

示例#2

成分

@Component({...})
export class AppComponent {

  log(text: string) {             // same as your original code
    console.log(text);
    this.clickVal = text;
  }
}

模板

....
// Specify the path of your routerLink without invoking similar function as your
// click, as you don't want to invoke the function twice for just 1 element.

<a routerLink="second" (click)="log('second');">Second</a>

Answer 2

将balh/${this.blah.blahId}作为@Input()传递给lib-comp而不是发出鼠标事件。