href 的链接在 Angular 应用程序中不起作用

Question

我刚刚将 angular 应用作为静态 Web 应用部署到 Azure。

当我尝试在视图之间导航时，通过 link 导航时出现 404 错误，但通过 angular/router 导航时工作正常。 这两种方法在本地都有效，只有部署到 Azure 后才会出现问题。我已经尝试按照 所述解决问题，但这对我不起作用。

例如：

app.component.ts

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

goToNews(): void {
    this.router.navigate(['/news'])
}

app.component.html

<a class="nav-link" (click)="goToNews()">News</a> <!-- works -->
<a class="nav-link" href="/news">News</a>         <!-- does not work -->

第一个 link 工作正常，但第二个 link 没有。在 url 中键入视图的路由也会导致 404 错误。

有谁知道为什么会这样或如何解决？

谢谢:)

Answer 1

Angular 路由器

问题是 anker 元素的 href 不知道您的 Angular 路由器。使用 angular 路由器的正确方法是使用 routerLink 指令：

<a routerLink="/news">News</a>

您也可以使用相对路径或使用 href 的完整路径：

<a href="https://angular-ivy-7dotr6.stackblitz.io/other">Other</a> | <!-- BAD PRACTICE-->
<a href="../home">Home2</a> <!-- BAD PRACTICE-->

然而，这样做您并没有使用 angular 路由器，而且浏览器看起来很清爽。这是一个 不好的做法，但我将其包含在 Stackblitz 上的示例中，以便您了解其中的区别并了解正在发生的事情。