Tôi đang cố gắng điều hướng đến một trang khác bằng cách nhấp vào một nút nhưng nó không hoạt động. Điều gì có thể là vấn đề. Bây giờ tôi đang học góc 2 và nó hơi khó khăn đối với tôi bây giờ.

//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>

Sử dụng nó như thế này, sẽ hoạt động:

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

Bạn cũng có thể sử dụng router.navigateByUrl('..')như thế này:

<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');
};

Cập nhật

Bạn phải chèn Routerhàm tạo như sau:

constructor(private router: Router) { }

chỉ sau đó bạn có thể sử dụng this.router. Cũng nhớ nhập RouterModulevào mô-đun của bạn.

Cập nhật 2

Bây giờ, Sau Angular v4, bạn có thể trực tiếp thêm routerLinkthuộc tính trên nút (Như đã đề cập bởi @mark trong phần bình luận) như bên dưới -

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

Bạn có thể sử dụng routerLink theo cách sau,

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

hoặc sử dụng <button [routerLink]="['./url']">trong trường hợp của bạn, để biết thêm thông tin, bạn có thể đọc toàn bộ stacktrace trên github https://github.com/angular/angular/issues/9471

các phương pháp khác cũng đúng nhưng chúng tạo ra sự phụ thuộc vào tệp thành phần.

Hy vọng mối quan tâm của bạn được giải quyết.

 <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']);
};

Điều quan trọng là bạn phải trang trí liên kết bộ định tuyến và liên kết bằng dấu ngoặc vuông như sau:

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

Trong đó " / service " trong trường hợp này là url đường dẫn được chỉ định trong thành phần định tuyến.

Có liên kết bộ định tuyến trên nút dường như hoạt động tốt đối với tôi:

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

bạn có thể thay đổi

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

ở cấp thành phần trong hàm tạo như dưới đây

    constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false; 
}

Làm theo các bước sau

Thêm nhập trong thành phần chính của bạn

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

Trong cùng một tệp, hãy thêm mã bên dưới cho hàm tạo và phương thức

constructor(private route: Router) {}
public Dashbord()
{
 this.route.navigate(['/dashboard']);
}

Đây là .htmlmã tệp của bạn

<button mat-button (click)="Dashbord()">Dashboard</button><br>

Trong app-routing.module.tstệp thêm bảng điều khiển

const routes: Routes =
[
  { path: '', pathMatch: 'full' ,component: TestComponent},
  { path: 'dashboard', component: DashboardComponent } 
];

Chúc may mắn.