Настройка базового роутинга в Angular

Давайте теперь настроим роутинг. Сделаем так, чтобы если в адресной строке браузера вбит URL /aaaa/, то показывался первый компонент, а если вбит /bbbb/, то второй.

Такая настройка делается в файле app.routes.ts. Для начала нужно импортировать наши компоненты:

app/app.routes.tsimport { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

А теперь нужно сказать, какой URL какому компоненту соответствует. Для этого нужно сделать специальный массив объектов в маршрутами (роутами). В каждом объекте будет ключ path, в котором задается URL (без концевых слешей), и ключ component, в котором задается компонент, который показывается по этому URL:

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

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