使用Angular 2 中的按钮导航到另一个页面

发布于01月02日

我试图通过点击一个按钮导航到另一个页面，但它失败了.有什么问题吗.我现在正在学习angular 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>

推荐答案

像这样使用，应该行得通:

 <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

现在，在ANGLING v4之后，您可以直接在按钮上添加routerLink属性(如 comments 区中的@mark所述)，如下所示(No"‘/url？"从Angular 6开始，当路由模块中存在路由时)-

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

使用Angular 2 中的按钮导航到另一个页面

推荐答案

更新1

更新2

Angular相关问答推荐

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件？

是否自动处理Angular /RxJS观测数据的取消订阅

RxJS轮询+使用退避策略重试

出错后可观察到的重用

由于ngcc操作失败，Angular扩展可能无法正常工作

显示带有数组子列的标题表 - Angular

Cypress 12.8.1 无法使用条纹元素 iframe

应该显示在表格中的嵌套循环

ng 生成组件不会创建 ngOnInit 和构造函数

如何将我的数组数据转换为逗号分隔的字符串

在一个组件中创建多个表单

在 angular2 中，如何获取在为 @Input 发送的对象上更改的属性的 onChanges

Angular 2+ 一次性绑定

如何在数据表angular material中显示空消息，如果未找到数据

在 Angular2 中跟踪 Google Analytics 页面浏览量

EmptyError： no elements in sequence

如何添加/设置环境 Angular 6 angular.json 文件

Mat-autocomplete - 如何访问选定的选项？

Angular 4 错误：没有 HttpClient 的provider提供者

重置表单的最简洁方法