RouterLink가 작동하지 않습니다

angular2 앱의 내 라우팅이 잘 작동합니다. 하지만 난에 따라 일부 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>

나는 그들을 클릭하면 존경받는 구성 요소로 이동하지만 아무것도 수행하지 않을 것으로 예상합니다.

당신이 보여주는 코드는 절대적으로 정확합니다.

귀하의 문제는이 템플릿을 사용하는 모듈로 RouterModule (RouterLink가 선언 된 위치)을 가져 오지 않는다는 것입니다.

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

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

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

그런 다음 모듈 가져 오기에 추가하십시오.

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

올바른 import 문과 함께 해당 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="https://stackoverflow.com/">

mroe 정보를 위해 이와 같이 사용하십시오이 주제를 읽으십시오

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

링크가 잘못되었습니다. 다음을 수행해야합니다.

<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 대신 routerlink를 사용 했습니다 .

나는이 질문이 지금까지 상당히 오래되었다는 것을 알고 있으며 지금까지 수정했을 가능성이 높지만이 문제를 해결하는 동안이 게시물을 찾은 모든 사람을위한 참조로 여기에 게시하고 싶습니다. Anchor 태그가 Index.html에 있으면 작동하지 않습니다. 구성 요소 중 하나에 있어야합니다.

모듈을 분할 한 후이 오류가있는 사람은 경로를 확인하면 다음과 같은 일이 발생했습니다.

public-routing.module.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-routing.module.ts :

const routes: Routes = [
];

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

움직임 { path: '**', redirectTo: 'home' }AppRoutingModule로 하십시오.

public-routing.module.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-routing.module.ts :

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

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

이 상황에 적합한 또 다른 사례가 있습니다. 인터셉터에서 Boolean이 아닌 값을 반환하도록 만들면 최종 결과는 이와 같습니다.

예를 들어, 나는 obj && obj[key] 물건 . 잠시 디버깅 한 후 Boolean(obj && obj[key])클릭이 통과되도록하려면 수동으로 부울 유형으로 변환 해야합니다.

작업 샘플에 따라 순수 구성 요소의 경우에 대한 솔루션을 찾았습니다.

1. 앱 수준에서 구성 요소 선언
2. 구성 요소에서 초기화 하지 마십시오.

내 눈처럼별로 예리하지 않은 눈 때문에 나는 href대신 routerLink#facepalm을 알아 내기 위해 몇 번의 검색을했다.