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

นอกเหนือจากการมีคำสั่งการนำเข้าที่ถูกต้องแล้วคุณยังต้องมีที่สำหรับแสดง 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>

ฉันทราบดีว่าคำถามนี้ค่อนข้างเก่าแล้วในตอนนี้และคุณน่าจะแก้ไขได้แล้วในตอนนี้ แต่ฉันต้องการโพสต์ที่นี่เพื่อเป็นข้อมูลอ้างอิงสำหรับทุกคนที่พบโพสต์นี้ในขณะที่แก้ไขปัญหานี้ก็คือสิ่งนี้ชนะ จะใช้ไม่ได้หากแท็ก Anchor ของคุณอยู่ใน Index.html จำเป็นต้องอยู่ในส่วนประกอบอย่างใดอย่างหนึ่ง

ลิงก์ไม่ถูกต้องคุณต้องทำสิ่งนี้:

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

คุณสามารถอ่านบทแนะนำนี้

สำหรับใครก็ตามที่มีข้อผิดพลาดนี้หลังจากแยกโมดูลตรวจสอบเส้นทางของคุณสิ่งต่อไปนี้เกิดขึ้นกับฉัน:

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

ผมใช้ routerlink แทนrouterLink

นอกจากนี้ยังมีอีกกรณีหนึ่งที่เหมาะสมกับสถานการณ์นี้ หากใน interceptor ของคุณคุณทำให้มันส่งคืนค่าที่ไม่ใช่บูลีนผลลัพธ์สุดท้ายก็เป็นเช่นนั้น

ตัวอย่างเช่นฉันพยายามจะคืนobj && obj[key]ของ หลังจากดีบั๊กสักพักแล้วฉันก็รู้ว่าฉันต้องแปลงสิ่งนี้เป็นประเภทบูลีนด้วยตนเองBoolean(obj && obj[key])เพื่อให้การคลิกผ่านไป

จากตัวอย่างการทำงานฉันได้หาวิธีแก้ปัญหาสำหรับกรณีของส่วนประกอบบริสุทธิ์:

1. ประกาศองค์ประกอบที่ระดับแอป
2. อย่าเริ่มต้นในองค์ประกอบ

สำหรับตาไม่คมชัดมากเช่นเหมืองฉันมีhrefแทนrouterLink, เอาฉันค้นหาไม่กี่รูปที่ออก #facepalm