调用路由的 Angular 4 函数

Question

我通过 Angular Web 应用程序中的菜单设置了路由。菜单设置了 routerLinks，如下面的主页链接:

<a routerLink="home">
            <button md-menu-item>
                <md-icon class="material-icons"> home </md-icon>
                <span> Home </span>
            </button>
        </a>

app.router 包含:

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent },
];

我想在组件中有一个按钮，重定向到普通菜单中不可用的查询表单，但在组件中的按钮上放置链接似乎不起作用。为什么是这样？

我要做的理想事情是在调用路由的组件中的 html 元素中放置一个函数 - 这可能吗？

Answer 1

如果我理解正确，是的，这当然是可能的。

只需将 Router 添加到您的组件构造函数中:

constructor(private router: Router) {}

然后您可以在您的函数中从 Router 类调用导航函数，该函数将在单击按钮后调用，例如:

this.router.navigate(['home']);

另一种可能性是将 [routerLink] 放在 html 标签中:

<a [routerLink]="['/home']">Go To Home</a>

检查这个:

https://angular.io/guide/router

https://angular.io/api/router/Router