Тег для роутинга в Angular

В предыдущем уроке мы настроили маршруты. Теперь нам нужно в родительском компоненте указать место, в которое будут выводиться наши дочерние компоненты.

Это место указывается с помощью специального тега router-outlet, который мы пишем в родительском компоненте.

Для начала этот тег нужно подключить:

import { RouterOutlet } from '@angular/router';

Прописать в ключе imports декоратора:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Теперь в родительском компоненте мы можем написать тег router-outlet:

parent
<router-outlet></router-outlet>

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

Обратите внимание на то, что в родительский компонент дочерние компоненты импортировать не нужно. Мы импортируем их в файл с роутами.

Поочередно вбейте в адресную строку урлы /aaaa/ и /bbbb/. Убедитесь, что подключаются соответствующие компоненты.