Angular routerLink가 해당 구성 요소로 이동하지 않습니다.

Angular routerLink가 해당 구성 요소로 이동하지 않습니다.

angular2 app에서의 나의 라우팅은 잘 작동합니다.하지만 저는 이것을 기반으로 routeLink를 만들 것입니다.

다음은 내 라우팅입니다.

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

그리고 제가 만든 링크는 다음과 같습니다.

<ul class="nav navbar-nav item">
  <li>
    <a routerLink='/home' routerLinkActive="active">Home</a>
  </li>
  <li>
    <a routerLink='/about' routerLinkActive="active">About this</a>
  </li>
</ul>

해당 구성 요소를 클릭하면 해당 구성 요소로 이동하지만 아무 작업도 수행하지 않습니다.

당신이 거기서 보여주고 있는 코드는 절대적으로 맞습니다.

RouterLink가 선언된 RouterModule을 이 템플릿을 사용하는 모듈로 가져오지 않는 것이 문제인 것 같습니다.

저도 비슷한 문제가 있었는데 문서에 이 단계가 언급되어 있지 않아서 해결하는 데 시간이 좀 걸렸습니다.

따라서 이 템플릿을 사용하여 구성 요소를 선언하는 모듈로 이동하여 다음을 추가합니다.

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

그런 다음 모듈 가져오기에 추가합니다. 예를 들어,

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

올바른 가져오기 문을 가지는 것과 함께, 당신은 또한 그 routerLink를 보여줄 장소가 필요할 것입니다.<router-outlet></router-outlet>요소. 즉, HTML 마크업의 어딘가에 배치해야 라우터가 해당 데이터를 표시할 위치를 알 수 있습니다.

템플릿에 아래 내용을 추가하려면 이 작업을 잊지 마십시오.

<router-outlet></router-outlet>

다음과 같이 링크를 변경해 보십시오.

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

또한 index.html의 헤더에 다음을 추가합니다.

<base href="/">

이 형식처럼 사용 정보 이 항목을 읽습니다.

<a [routerLink]="['/about']">About this</a>

모듈을 분할한 후에 이 오류가 발생한 사람이 경로를 확인하면 다음과 같은 상황이 발생합니다.

public-public-message.sys.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-vmdk.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

이동{ path: '**', redirectTo: 'home' }AppRouting 모듈로:

public-public-message.sys.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-vmdk.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

지금쯤이면 이 질문이 꽤 오래된 것으로 알고 있고, 아마 지금쯤 고쳤을 것입니다. 하지만 이 문제를 해결하는 동안 이 게시물을 발견한 사람들을 위한 참조로 여기에 게시하고 싶습니다. 만약 당신의 앵커 태그가 Index.html에 있다면 이런 종류의 것은 작동하지 않을 것입니다.구성 요소 중 하나에 있어야 합니다.

저는 routerLink 대신 routerLink를 사용하고 있었습니다.

링크가 잘못되었으므로 다음 작업을 수행해야 합니다.

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

이 자습서를 읽을 수 있습니다.

이 상황에 맞는 또 다른 사례가 있습니다.인터셉트에서 부울 값이 아닌 값을 반환하도록 설정한 경우 최종 결과는 다음과 같습니다.

예를 들어, 저는 돌아가려고 했습니다.obj && obj[key]stuff 'boolean'처럼으로 Boolean 한다는 것을 . 잠시 디버깅한 후에, 저는 이것을 수동으로 부울 유형으로 변환해야 한다는 것을 깨달았습니다.Boolean(obj && obj[key])딸깍 소리가 지나가도록.

작업 샘플에 따라 순수 부품의 경우에 대한 솔루션을 파악했습니다.

1. 앱 수준에서 구성 요소 선언
2. 구성 요소에서 초기화 안 함

눈은 에, 는 나럼날로눈때에문나, 는처운카▁like▁had,.href에 routerLink#페이스 팜을 알아내기 위해 몇 가지 검색을 했습니다.

대부분의 시간 문제는 철자 오류입니다.

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

철자를 다시 한 번 확인하십시오.

구성요소 내부에 네비게이터가 있고 해당 스타일시트에서 스타일을 활성화했다고 선언한 경우에는 해당 유형이 작동하지 않습니다.저의 경우는 이것이 문제였습니다.

각진 재료를 사용한 내 나비바의 아이템은 다음과 같습니다.

<div class="nav-item">
        <a routerLink="/test" routerLinkActive="active">
          <mat-icon>monetization_on</mat-icon>My link
        </a>
<mat-divider class="nav-divider" [vertical]="true"></mat-divider>

그래서 나는 내 스타일에 활동적인 스타일을 뿌리에 넣었습니다.

a.active {
  color: white !important;
  mat-icon {
    color: white !important;
  }
}

다른 해결책들이 도움이 안 되었다면 도움이 되길 바랍니다.

저의 경우 VS 코드에 줄바꿈이 포함되어 있었고, [routerLink]에 속하는 마감 따옴표의 끝과 다음 속성 사이에 공백이 없었습니다.라인 래퍼가 두 줄로 나누어서 누락된 공간이 눈에 띄지 않게 했습니다.

https://stackblitz.com/ 을 온라인 IDE로 사용하는 동안 https://angular.io/start/start-routing 튜토리얼을 따르는 경우, 새 창에서 열기/열기를 통해 수정되었습니다.

탐색 링크를 인덱스 페이지에서 구성 요소로 이동하여 문제를 해결할 수 있었습니다(실제로 인덱스.html에 템플릿을 추가했습니다).

선언 배열에 작성한 구성 요소를 'app.module.ts' 또는 해당 모듈 파일에 추가하여 모듈이 이러한 구성 요소를 작성했음을 알 수 있도록 합니다.또한 CommonModule 및 RouterModule을 가져오는 것도 잊지 마십시오.

import {AboutComponent} from './about.component';
import {FormComponent} from './form.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [FormComponent, AboutComponent]
})
export class MyTemplatesModule { }

언급URL : https://stackoverflow.com/questions/38832851/angular-routerlink-does-not-navigate-to-the-corresponding-component