angular6 - Angular 6 - 如何通过单击图标转到另一个视图？

Question

我不知道该怎么做。请问您能告诉我如何通过单击Angular6上的图标转到另一个视图吗？谢谢！

标签： angular6

Answer 1

要更改 Angular 中的视图（无需重新加载页面），您需要路由器。

您可以将您的图标包装在一个锚标记内<a>，并使用它routerLink来定义您想要在用户单击该图标时加载的视图。

例如，您正在构建一个电子商务网站，其中有一个联系人图标和一个购物车图标。您可以像这样为每个图标定义视图：

<a routerLink="/contacts" routerLinkActive="active">
    <mat-icon matSuffix>contacts</mat-icon>
</a>
<a routerLink="/shopping_cart" routerLinkActive="active">
    <mat-icon matSuffix>shopping_cart</mat-icon>
</a>

因此，当用户单击时contacts icon，contactsComponent 将加载到您的视图中，并且 URL 将更改为yourwebsite.com/contacts.

您可以了解有关路由器和material-icon 的更多信息。