Routes меняет URL, но не отображает соответствующую страницу

Пытаюсь перемещаться между страницами, но это не работает. Я определил маршруты, использую routerLink в соответствии с документацией Angular и проверил бесчисленное количество тем Stackoverflow, но все еще не могу заставить его работать.

Мой проект новый, поэтому в основном у меня есть только эти 3 компонента: _ AppComponent (родительский для других 2) _ WelcomePageComponent _ LandingPageComponent

Это app.module.ts, где я определил маршруты.

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

Это html, где я пытаюсь создать ссылку на страницу приветствия.

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


<router-outlet></router-outlet>

При переходе по ссылке меняется URL, но не страница. Хотя отображается содержимое приветственной страницы, я бы предпочел полностью изменить страницу.

Что я здесь делаю неправильно?

Спасибо


angular routes routing
person Seb    schedule 11.08.2019    source источник
comment
Действительно ли он отображает WelcomeComponent в <router-outlet>? Потому что это то, что он должен делать…   -  person Will Alexander    schedule 11.08.2019
comment
Да, ‹router-outlet› правильно отображает WelcomeComponent. Я добавил его для проверки. Однако я не переключаю страницу, чтобы попасть на страницу приветствия с помощью routerLink.   -  person Seb    schedule 11.08.2019
comment
Маршрутизатор Angular используется для настройки одностраничных приложений. Вся идея в том, что в браузере нет перезагрузки страницы. Чего именно вы пытаетесь достичь?   -  person Will Alexander    schedule 11.08.2019
comment
Просто хотел перемещаться между тремя компонентами, которые у меня есть до сих пор, и полагал, что это означает смену страницы при переходе от одного к другому путем изменения URL-адреса с помощью routerLink.   -  person Seb    schedule 11.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вам придется немного изменить свой дизайн, чтобы добиться того, чего вы хотите.

Шаг 1. Создайте NavComponent, который будет содержать все навигационные ссылки. Удалить ссылки из AppComponent. Он должен содержать только тег router-outlet.

Шаг 2. Обновите конфигурацию маршрута следующим образом:

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

Добавлен демонстрационный код

person Amit Chigadani    schedule 11.08.2019
comment
Сохранение всех ссылок в NavComponent является частью передовой практики? Если да, спасибо за подсказку. Однако после проверки вашего демонстрационного кода у меня возникли проблемы с пониманием того, почему ваши routerLinks работают, поскольку их синтаксис похож на тот, который я пытался использовать. - person Seb; 11.08.2019
comment
Да, и это то, что я упоминал в каждом шаге. Рефакторинг кода. - person Amit Chigadani; 11.08.2019