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

Нека сега настроим маршрутизирането. Ще направим така, че ако в адресната лента на браузъра е въведен URL /aaaa/, да се показва първият компонент, а ако е въведен /bbbb/, да се показва вторият.

Тази настройка се прави във файла app.routes.ts. Първо трябва да импортираме нашите компоненти:

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

И сега трябва да кажем кой URL на кой компонент съответства. За това трябва да направим специален масив от обекти с маршрути (routes). Във всеки обект ще има ключ path, в който се задава URL (без крайни наклонени черти), и ключ component, в който се задава компонентът, който се показва на този URL:

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

Настройките на маршрутизирането обаче не са достатъчни. Трябва в родителския компонент да посочим мястото, в което ще се извеждат нашите компоненти. С това ще се заемем в следващия урок.