调用路由的Angular 4函数

Question

我通过 Angular 网络应用中的菜单设置了路由。菜单的 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

如果我理解正确的话，是的，当然可以。

只需将路由器添加到您的组件构造函数中：

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