Настройка базового роутинга в Angular
Давайте теперь настроим роутинг.
Сделаем так, чтобы если в адресной
строке браузера вбит URL
/aaaa/, то показывался
первый компонент, а если вбит
/bbbb/, то второй.
Такая настройка делается в файле
app.routes.ts. Для начала
нужно импортировать наши компоненты:
import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';
А теперь нужно сказать, какой URL
какому компоненту соответствует.
Для этого нужно сделать специальный
массив объектов в маршрутами (роутами).
В каждом объекте будет
ключ path, в котором
задается URL (без концевых слешей),
и ключ component, в котором
задается компонент, который показывается
по этому URL:
export const routes: Routes = [
{ path: 'aaaa', component: AaaaComponent },
{ path: 'bbbb', component: BbbbComponent },
];
Настройки роутинга, однако, недостаточно. Нужно в родительском компоненте указать место, в которое будут выводиться наши компоненты. Этим мы займемся в следующем уроке.
Настройте роутинг в файле app.routes.ts.