버튼을 클릭하여 다른 페이지로 이동하려고하는데 작동하지 않습니다. 무엇이 문제일까요? 나는 이제 앵귤러 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']">귀하의 경우에 사용 하십시오. 자세한 내용은 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 } 
];

행운을 빕니다.