Тег для роутинга в Angular
В предыдущем уроке мы настроили маршруты. Теперь нам нужно в родительском компоненте указать место, в которое будут выводиться наши дочерние компоненты.
Это место указывается с помощью
специального тега router-outlet,
который мы пишем в родительском
компоненте.
Для начала этот тег нужно подключить:
import { RouterOutlet } from '@angular/router';
Прописать в ключе imports
декоратора:
@Component({
......
imports: [RouterOutlet],
......
})
Теперь в родительском компоненте
мы можем написать тег router-outlet:
parent
<router-outlet></router-outlet>
В этот тег будет выводится один из дочерних компонентов, в зависимости от того, какой URL вбит в адресной строке.
Обратите внимание на то, что в родительский компонент дочерние компоненты импортировать не нужно. Мы импортируем их в файл с роутами.
Поочередно вбейте в адресную строку
урлы /aaaa/ и /bbbb/.
Убедитесь, что подключаются соответствующие
компоненты.