Rute mengubah URL tetapi tidak menampilkan halaman terkait

Saya mencoba menavigasi antar halaman tetapi tidak berhasil. Saya telah menentukan rutenya, saya menggunakan routerLink sesuai dokumentasi Angular dan telah memeriksa subjek Stackoverflow yang tak terhitung jumlahnya tetapi masih tidak dapat membuatnya berfungsi.

Proyek saya baru, jadi pada dasarnya saya hanya memiliki 3 komponen tersebut: _ AppComponent (induk dari 2 komponen lainnya) _ WelcomePageComponent _ LandingPageComponent

Ini adalah app.module.ts tempat saya menentukan rutenya.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { WelcomePageComponent } from './welcome-page/welcome-page.component';
import { LandingPageComponent } from './landing-page/landing-page.component';

const routes: Routes = [
  { path: '', component: AppComponent},
  { path: 'welcome', component: WelcomePageComponent },
  { path: 'landing', component: LandingPageComponent }
];

@NgModule({
  entryComponents: [
    WelcomePageComponent,
    LandingPageComponent
  ],
  declarations: [
    AppComponent,
    WelcomePageComponent,
    LandingPageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ini adalah html tempat saya mencoba membuat link ke halaman Selamat Datang.

<ul>
  <li>
    <a [routerLink]="['/welcome']" routerLinkActive="active">Welcome Page</a>
  </li>
</ul>


<router-outlet></router-outlet>

Saat mengklik link, URL-nya berubah tetapi halamannya tidak berubah. Meskipun menampilkan konten Halaman Selamat Datang, saya lebih suka mengubah halaman sepenuhnya.

Apa yang saya lakukan salah di sini?

Terima kasih


angular routes routing
person Seb    schedule 11.08.2019    source sumber
comment
Apakah ini benar-benar menampilkan WelcomeComponent di <router-outlet>? Karena itulah yang seharusnya dilakukan…   -  person Will Alexander    schedule 11.08.2019
comment
Ya, ‹router-outlet› menampilkan WelcomeComponent dengan benar. Saya menambahkannya untuk mengujinya. Namun saya tidak berpindah halaman untuk berakhir di halaman Selamat Datang dengan routerLink.   -  person Seb    schedule 11.08.2019
comment
Router Angular digunakan untuk mengatur Aplikasi Halaman Tunggal. Ide keseluruhannya adalah tidak ada halaman yang dimuat ulang di browser. Apa sebenarnya yang ingin Anda capai?   -  person Will Alexander    schedule 11.08.2019
comment
Hanya ingin bernavigasi di antara 3 komponen yang saya miliki sejauh ini, dan percaya bahwa itu berarti mengubah halaman saat bernavigasi dari satu komponen ke komponen lainnya, dengan memodifikasi url menggunakan routerLink.   -  person Seb    schedule 11.08.2019

Jawaban (1)


arrow_upward
1
arrow_downward

Anda harus sedikit mengubah desain untuk mencapai apa yang Anda inginkan.

Langkah 1 : Buat NavComponent, yang akan berisi semua link navigasi. Hapus tautan dari AppComponent. Seharusnya hanya berisi tag router-outlet.

Langkah 2 : Perbarui konfigurasi rute sebagai berikut:

const routes: Routes = [
  { path: '', component: NavBarComponent},
  { path: 'welcome', component: WelcomePageComponent },
  { path: 'landing', component: LandingPageComponent }
];

Menambahkan kode demo

person Amit Chigadani    schedule 11.08.2019
comment
Menyimpan semua tautan di NavComponent adalah bagian dari praktik terbaik yang harus diikuti? Jika ya, terima kasih atas tipnya. Namun setelah memeriksa kode demo Anda, saya kesulitan memahami mengapa routerLinks Anda berfungsi, karena sintaksisnya tampak mirip dengan yang saya coba gunakan. - person Seb; 11.08.2019
comment
Ya, dan itulah yang saya sebutkan di setiap langkah. Memfaktorkan ulang kode. - person Amit Chigadani; 11.08.2019