Angular 4函数调用路由 [英] Angular 4 function that calls route

问题描述

我已通过Angular网络应用程序中的菜单设置了路由。菜单中的routerLink设置类似于下面的home链接：

I have routing set up through a menu in my Angular web-app. The menu has routerLinks set up like the home link below:

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

app.router包含：

The app.router contains:

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

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

I want to have a button in a component that redirects to an enquiry form that is not available in the normal menu, but placing an link on a button in the component does not seem to work. Why is this?

对我来说，理想的做法是将一个函数放置在名为route的组件的html元素中-这样可能吗？ p>

The ideal thing for me to do would be to place a function in an html element in the component that called the route - is this possible?

推荐答案

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

If I understand this correctly, yes it is of course possible.

只需将Router添加到组件构造函数中即可：

Just add Router to your component constructor:

constructor(private router: Router) {}

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

and then you can call navigate function from Router class in your function which will be called after click on button, for example:

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

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

Another possibility is to place [routerLink] in html tag:

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

检查此项目：

https://angular.io/guide/router

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

这篇关于Angular 4函数调用路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！