ฉันพยายามนำทางไปยังหน้าอื่นโดยคลิกปุ่ม แต่ไม่สามารถใช้งานได้ สิ่งที่อาจเป็นปัญหา ตอนนี้ฉันกำลังเรียนรู้เชิงมุม 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');
};

อัปเดต

คุณต้องฉีดRouterในตัวสร้างดังนี้:

constructor(private router: Router) { }

เพียงเท่านี้คุณก็สามารถใช้งานthis.routerได้ อย่าลืมนำเข้าRouterModuleในโมดูลของคุณ

อัปเดต 2

ตอนนี้หลังจาก Angular v4 คุณสามารถเพิ่มrouterLinkแอตทริบิวต์บนปุ่มได้โดยตรง(ตามที่กล่าวไว้โดย @mark ในส่วนความคิดเห็น) ดังต่อไปนี้ -

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

คุณสามารถใช้ routerLink ในลักษณะต่อไปนี้

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

หรือใช้<button [routerLink]="['./url']">ในกรณีของคุณสำหรับข้อมูลเพิ่มเติมคุณสามารถอ่าน stacktrace ทั้งหมดได้ที่ github https://github.com/angular/angular/issues/9471

วิธีการอื่น ๆ ก็ถูกต้องเช่นกัน แต่สร้างการพึ่งพาไฟล์คอมโพเนนต์

หวังว่าข้อกังวลของคุณจะได้รับการแก้ไข

 <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']"> <button class="btn btn-info"> link to other page </button></a>

โดยที่ " / service " ในกรณีนี้คือ url เส้นทางที่ระบุในองค์ประกอบการกำหนดเส้นทาง

การมีลิงค์เราเตอร์บนปุ่มดูเหมือนว่าจะทำงานได้ดีสำหรับฉัน:

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

คุณสามารถเปลี่ยนแปลงได้

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

ในระดับส่วนประกอบในตัวสร้างเช่นร้อง

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

ทำตามขั้นตอนต่อไปนี้

เพิ่มการนำเข้าในองค์ประกอบหลักของคุณ

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

ในไฟล์เดียวกันให้เพิ่มโค้ดด้านล่างสำหรับตัวสร้างและวิธีการ

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

นี่คือ.htmlรหัสไฟล์ของคุณ

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

ในapp-routing.module.tsไฟล์เพิ่มแดชบอร์ด

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

โชคดี.