錨href vs angular路由器鏈接

Question

我正在嘗試在我的 Angular 7 應用程序中使用帶有 href 的錨標記。 當我單擊鏈接時，瀏覽器中的 url 會發生變化，但頁面沒有導航到。 如果我放 target="_self" 就可以了，所以這行得通

<a href="/abcd" target="_self">Abcd</a>

但這僅對瀏覽器中的 url 更改不起作用但沒有任何反應

<a href="/abcd">Abcd</a>

好像我使用 Angular 路由並使用 RouterLink 它可以工作。

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

誰能解釋一下這種行為。

Answer 1

Href 是Html提供的基本屬性，用於在單擊時重新加載頁面的頁面導航。

routerLink是 angular 提供的屬性，用於在不重新加載頁面的情況下導航到不同的組件。

兩者之間的主要區別在於href 會殺死當前頁面的 state 而 routerLink 不會丟失頁面的 state 。

例如。 如果頁面中存在輸入文本框，則routerLink在導航后將保留其值。routerLink可以被認為是angular中href的自定義屬性，通過覆蓋頁面重新加載等一些功能

Answer 2

使用 href 導航：

href 是瀏覽器提供的用於在頁面之間導航（切換）的默認屬性，其中整個頁面將被重新加載而丟失當前的 state。

而黑客是通過防止默認行為。

例如：

內模板：

 <a href="route" (click)=onClick($event) />

內部組件：

onClick(event :Event){
    event.preventDefault();
}

在 href 中使用 target 屬性：

Please refer to https://www.w3schools.com/tags/att_link_target.asp

使用 routerLink 導航：

Angular 在 routerLink 指令中模仿上述行為

Answer 3

Angular 應用是單頁應用 (SPA)。 使用 href 打破了這種設計模式。 效果是每個使用 href 的導航都會完全重置您的應用程序 state。 使用 Angular 或任何其他 SPA 時，請始終避免使用 href。

routerLink 加載 Angular 內部的資源，並且在瀏覽器中加載的頁面永遠不會完全重新加載（因此應用程序 state 被維護。）這種情況的線索是瀏覽器的加載指示器：

當遵循傳統鏈接時，您會在瀏覽器中看到微調器正在運行（在選項卡上，或者在大多數情況下通過地址欄）。當您等待 Angular 組件加載時，該微調器將處於空閑狀態。

這是我在開發時總是檢查的東西，當我的 state 重置時。 有時問題是我使用了 href 而不是 routerLink。

Answer 4

使用href直接告訴瀏覽器以新鏈接的形式打開鏈接，這樣應用程序將被重新加載並仍然鏈接到已配置的確切頁面。

根據文檔， routerLink使用內部 api 導航應用程序而無需重新加載。

您可以單擊使用href和routerLink的鏈接查看差異演示

Answer 5

有時您不能使用 routerLink，例如，如果您在非 angular web 組件中。

我用來解決刷新問題的一種解決方法是檢查所有“a”標簽的點擊，如果 routerlink 屬性不存在，則阻止默認行為，然后使用路由器導航。

  @HostListener('window:click', ['$event'])
  onClick(e: any) {
    const path = e.composedPath() as Array<any>;
    const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
    if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
      const href = firstAnchor.getAttribute('href');

      this.router.navigateByUrl(href);

      e.preventDefault();
    }
  }

Answer 6

Bytech 有一個正確的答案，但有時您想在 angular 中使用 href。 例如，我有一個應用程序，其中包含多個項目。 在一個鏈接上，我想從商店項目導航到成員門戶項目。 在這種情況下，因為它們在兩個不同的基本 url 上提供服務（在這種情況下，對於開發環境，它的 localhost:4201 && localhost:4202）使用路由器鏈接實際上不會將您路由到另一個基本路由位置。 需要使用 href，否則它將無法將您路由到正確的 url。

Answer 7

如果您在 angular 應用程序中使用 href，請避免使用它。 Angular 具有路由器功能，其中 routerLink 是其中的一部分。

<p routerLink='/path'>Text</p>

如需更多了解，請查看本文Angular 路由