RouterLink không hoạt động

Định tuyến của tôi trong các ứng dụng angle2 hoạt động tốt. Nhưng tôi sẽ tạo một số routeLink dựa trên điều này :

Đây là định tuyến của tôi:

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

Và đây là các liên kết mà tôi đã thực hiện:

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

Tôi mong đợi rằng, khi tôi nhấp vào chúng, nó sẽ điều hướng đến thành phần được tôn trọng, nhưng chúng không thực hiện bất cứ điều gì?

Mã bạn đang hiển thị ở đó là hoàn toàn chính xác.

Tôi nghi ngờ rằng vấn đề của bạn là bạn không nhập RouterModule (là nơi RouterLink được khai báo) vào mô-đun sử dụng mẫu này.

Tôi đã gặp sự cố tương tự và tôi đã mất một thời gian để giải quyết vì bước này không được đề cập trong tài liệu.

Vì vậy, hãy chuyển đến mô-đun khai báo thành phần với mẫu này và thêm:

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

sau đó thêm nó vào nhập mô-đun của bạn, ví dụ:

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

Cùng với việc có các câu lệnh nhập chính xác, bạn cũng sẽ cần một vị trí để hiển thị routerLink đó, nằm trong <router-outlet></router-outlet>phần tử, vì vậy nó cũng cần được đặt ở đâu đó trong đánh dấu HTML của bạn để bộ định tuyến biết vị trí hiển thị dữ liệu đó.

đừng quên điều này để thêm điều này bên dưới trong mẫu của bạn:

<router-outlet></router-outlet>

Hãy thử thay đổi các liên kết như bên dưới:

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

Ngoài ra, hãy thêm phần sau vào tiêu đề của index.html:

<base href="https://stackoverflow.com/">

sử dụng nó như thế này cho thông tin mroe đọc chủ đề này

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

Các liên kết sai, bạn phải thực hiện điều này:

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

Bạn có thể đọc hướng dẫn này

Tôi đang sử dụng routerlink thay vì routerLink .

Tôi biết rằng câu hỏi này hiện đã khá cũ và rất có thể bạn đã sửa nó ngay bây giờ, nhưng tôi muốn đăng ở đây để tham khảo cho bất kỳ ai tìm thấy bài đăng này trong khi khắc phục sự cố này là điều này đã thắng sẽ không hoạt động nếu các thẻ Anchor của bạn nằm trong Index.html. Nó cần phải nằm trong một trong các thành phần

Đối với bất kỳ ai gặp lỗi này sau khi ghép các mô-đun kiểm tra các tuyến đường của bạn, điều sau đã xảy ra với tôi:

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

Di chuyển { path: '**', redirectTo: 'home' }đến AppRoutingModule của bạn:

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

Cũng có một trường hợp khác phù hợp với tình huống này. Nếu trong bộ chặn của bạn, bạn đã đặt nó trả về giá trị không phải Boolean, thì kết quả cuối cùng là như vậy.

Ví dụ, tôi đã cố gắng trả lại obj && obj[key]đồ đạc. Sau khi gỡ lỗi một lúc, sau đó tôi nhận ra mình phải chuyển đổi kiểu này sang kiểu Boolean theo cách thủ công Boolean(obj && obj[key])để cho phép nhấp chuột trôi qua.

Sau mẫu làm việc , tôi đã tìm ra giải pháp cho trường hợp thành phần nguyên chất:

1. Khai báo thành phần ở cấp ứng dụng
2. Không init trong thành phần

Đối với đôi mắt không sắc sảo như của tôi, hrefthay vào đó routerLink, tôi đã tìm kiếm một vài lần để tìm ra #facepalm.