Question

在Angular中开发并创建视图时，我总是使用routerLink从一个视图导航到另一个视图。最近，我看到了在Angular中创建的重要页面，这些页面使用href而不是routerLink来路由网站上的视图。我的问题是，何时在Angular中使用href代替routerLink方便，为什么？是否给人以为它不是SPA的感觉？

如果是这样，我不理解它，因为它失去了Angular布线的全部潜力。

一些例子是

 <asp:Repeater ID="rptr_1" runat="server" OnItemDataBound="rptr_1_ItemDataBound">
    <ItemTemplate>
        <div class="row ">
            <div class="col-lg-3">
                <asp:LinkButton ID="lbtn_reconfirm" runat="server" CssClass="col-lg-6" Text="Reconfirm" OnClick="lbtn_reconfirm_Click" CommandArgument='<%# Eval("ScheduleID") %>'></asp:LinkButton>
            </div>
        </div>
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
    <FooterTemplate>
        <div id="noRecords" runat="server" visible="false">
            <div class="alert alert-danger">No schedules have been assigned.</div>
        </div>
    </FooterTemplate>
</asp:Repeater>

预先感谢

Answer 1

当我们在角度中使用 href 时，该应用将丢失其状态，并且整个应用将重新加载。但是当我们使用 routerlink 时，应用程序的状态保持不变例如。假设您的角度项目中有两个页面/组件分别命名为Second和Third。

<div class="nav">
  <p>Using "href"</p>
  <ul>
    <li><a href="/" >1</a></li>
    <li><a href="/second" (click)="onClick($event)">2</a></li>
    <li><a href="/third">3</a></li>
  </ul>
</div>
<hr>
<div class="nav">
  <p>Using "routerLink"</p>
  <ul>
    <li><a routerLink="/">1</a></li>
    <li><a routerLink="/second">2</a></li>
    <li><a routerLink="/third">3</a></li>
  </ul>
</div>
<hr>
<div class="page-content">
  <p>Page Content</p>
  <router-outlet></router-outlet>
  <hr>
  <p>Input Field</p>
  <app-input></app-input>
</div>

在上面的示例中，如果您在输入字段中键入内容并使用 href 导航进行导航，则该状态将丢失。但是，当您使用 routerlink 导航进行导航时，将获得该输入文本。

让我们看看屏幕后面发生了什么：-

<li><a href="/second" (click)="onClick($event)">2</a></li>

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

如果您阻止 href 的默认操作，则会看到该页面不会重新加载 routerlink 中发生的情况，这仅表示 routerlink 还使用了 href 进行导航，但阻止了其默认行为。

Answer 2

将href用于外部链接，将其与a标签一起使用，将routerLink用于路线。您不能将href与其他任何标记一起使用，而只能将a标记与其他标记一起使用。

routerLink是href标签的属性，而a是Angular装饰器。

什么时候应该使用href代替Angular中的routerLink？

2 个答案: