导航到角度为2的按钮的另一个页面

我试图通过点击一个按钮导航到另一个页面，但它失败了。有什么问题吗。我现在正在学习角度2，这对我来说有点困难。

//Routes/Path in a folder call AdminBoard


export const AdminRoutes: Routes =[


{
path: 'dashboard',


component: AdminComponent,
children: [
{path: '', redirectTo: 'Home'},
{path: 'Home', component: HomeComponent},
{path: 'Service', component: ServiceComponent},
{path: 'Service/Sign_in', component:CustomerComponent}


]


}


];


//Button is also in a different folder. Click button to navigate to this page           {path: 'Service/Sign_in', component:CustomerComponent}


<button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>
469052 次浏览
小开 
 <button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>




import { Router } from '@angular/router';


btnClick= function () {
this.router.navigate(['/user']);
};
小开
最佳答案

像这样使用，应该可以:

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

你也可以这样使用 router.navigateByUrl('..'):

<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>


import { Router } from '@angular/router';


btnClick= function () {
this.router.navigateByUrl('/user');
};

更新1

你必须像这样在构造函数中注入 Router:

constructor(private router: Router) { }

只有这样你才能使用 this.router。还记得导入 RouterModule在你的模块。

更新2

现在，在 Angular v4之后，您可以直接在按钮上添加 routerLink属性(如注释部分中@mark 提到的) ，如下所示(No“’/url从角度6开始，当 RouterModule 中存在路由时)-

 <button [routerLink]="'url'"> Button Label</button>
小开

可以按以下方式使用 routerLink,

<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">

或者在您的案例中使用 <button [routerLink]="['./url']">，为了获得更多的信息，您可以阅读 github https://github.com/angular/angular/issues/9471上的整个堆栈跟踪

其他方法也是正确的，但它们在组件文件上创建了依赖项。

希望你的顾虑能得到解决。

小开

重要的是，你装饰路由器链接和链接的方括号如下:

<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>

其中“ 服务”在本例中是路由组件中指定的路径 URL。

小开

将路由器链接放在按钮上似乎对我很有用:

<button class="nav-link" routerLink="/" (click)="hideMenu()">
<i class="fa fa-home"></i>
<span>Home</span>
</button>
小开

有许多评论和答案建议使用 routerLink-在不同的方式。我认为，以下是当今最好的方式:

相对 简单链接:

<button [routerLink]="/Service/Sign_in">Add Customer</button>

也可以使用类似

<button [routerLink]="['/Service', serviceId, 'Sign_in']">Add Customer</button>

找到 /Service/2102/Sign_in的链接，那里的 serviceID是2102。

如果你有 查询参数使用:

<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}">Add Customer</button>

你会收到一个到 /Service/Sign_in?mode=red的链接。

如果您当前的 URL 已经有参数(例如 /Service/foo?status=bar) ，您可以添加 保留并添加额外的参数与:

<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}" queryParamsHandling="merge">Add Customer</button>

它会给你一个到 /Service/foo?status=bar&mode=red的链接。

或者你甚至可以 保存现有的(如果有一些存在，例如，如果你在 /Service/foo?mode=blue)与:

<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}" queryParamsHandling="preserve">Add Customer</button>

你会收到一个到 /Service/Sign_in?mode=blue的链接。

这里解释了一些保存历史或使用片段的更多模式: https://angular.io/api/router/RouterLink


提交答案