각도 2의 단추를 사용하여 다른 페이지로 이동합니다.

각도 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>

이렇게 사용하면 다음과 같이 작동해야 합니다.

 <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가 언급한 바와 같이) ("/url?"은 라우터 모듈에 경로가 존재하는 Angular 6 이후로 없음) -

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

사용할 것을 제안하는 많은 의견과 답변이 있었습니다.routerLink여러 가지 방법으로저는 다음과 같은 방법이 요즘 최고라고 생각합니다.

상대적으로 단순한 링크:

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

같은 배열로도 가능합니다.

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

에 대한 링크를 얻다/Service/2102/Sign_in어디에serviceID2102입니다.

---

쿼리 매개 변수가 있는 경우 다음을 사용합니다.

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

그리고 당신은 링크를 받습니다./Service/Sign_in?mode=red.

---

현재 URL에 이미 매개 변수가 있는 경우(예:/Service/foo?status=bar), 다음을 사용하여 keep 및 추가 파라미터를 추가할 수 있습니다.

<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

라우터 링크와 링크를 다음과 같이 대괄호로 장식하는 것이 중요합니다.

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

아무도 언급하지 않는 것처럼 보이는 중요한 차이점이 하나 있습니다.

사용하는 경우[routerLink]직접 버튼을 누르거나, 당신은 당신의 웹사이트를 탐색합니다..ts파일 사용routerHTML은 단추를 링크로 표시하지 않습니다.

이는 다음과 같은 몇 가지 의미가 있습니다.

• 사용자가 탐색하려는 링크를 표시하지 않습니다(오 이동, 브라우저의 왼쪽 하단 화면에서).

URL 미리 보기

• 새 탭에서 링크를 열 수 없습니다(오른쪽 클릭 또는 컨트롤/명령 클릭 사용).

사용자에게 최상의 경험을 제공하기 위해 버튼을 감싸는 형식을 사용할 것을 강력히 권장합니다.a 태그:

<a [routerLink]="'/home'"><button>Home</button></a>

언급URL : https://stackoverflow.com/questions/41427405/navigate-to-another-page-with-a-button-in-angular-2