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

Question

我不知道该怎么做。请问您如何通过单击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。

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