Блог

Я пытаюсь понять, как работает базовая маршрутизация в Angular 2 из документов, и я этого не понимаю.

Я настроил PLUNK, где у меня есть панель навигации. Цель состоит в том, чтобы кнопка «About» перенаправила пользователя к компоненту about. Компоненты уже находятся в стадии разработки.

Изначально я написал здесь больше, но это сводится к тому, что я не понимаю, почему моя маршрутизация не работает (я чувствую, что настроил ее правильно):

 <a routerLink="/home-page" routerLinkActive="active">Home</a>  
  

Этот код ничего не делает при нажатии. Мои определения маршрутов выглядят следующим образом:

 import { Routes } from '@angular/router';
import { AboutPage } from './about-page.component.ts'
import { HomePage } from './home-page.component.ts'

export const appRoutes: Routes = [
  { path: 'home-page', component: HomePage },
  { path: 'about-page', component: AboutPage }
];
  

Кроме того, по какой-либо причине ввод <router-outlet></router-outlet> navbar.components.ts показывает, что router-outlet не найден и выдает. Кроме того, я на 99% уверен, что базовая ссылка настроена правильно, поэтому, вероятно, нет необходимости это проверять.

Короче говоря, как мне заставить мои маршруты работать?

1) добавлены все файлы .ts в папку src

2) Вам нужно импортировать RouterModule, а затем использовать его с помощью метода forRoot(), как показано в app.routing.ts

 import { Routes,RouterModule } from '@angular/router';
export const routing = RouterModule.forRoot(appRoutes);
  

3) Теперь вам нужно импортировать маршрутизацию в метаданные импорта @NgModule.

 @NgModule({
  imports: [ BrowserModule,routing ],
  ...
})
  

4) Наконец, добавлен маршрут по умолчанию в app.routing.ts

 export const appRoutes: Routes = [
     {path:'',redirectTo:'home-page',pathMatch: 'full'},
     ...
     ...
   ];
  

Рабочая демонстрация: http://plnkr.co/edit/mEvR1vU8EEkctNikaNAi?p=preview