Что такое Router Outlet?

В Angular, Router Outlet — это специальный компонент, который служит контейнером для отображения компонентов, связанных с конкретными маршрутами. Это позволяет вам легко управлять тем, какие компоненты отображаются на странице в зависимости от текущего маршрута, не перезагружая страницу.

Как это работает?

Каждый раз, когда пользователь переходит по маршруту, срабатывает механизм маршрутизации Angular, который анализирует URL и определяет, какой компонент нужно загрузить. Router Outlet указывает, куда именно нужно вставить этот компонент.

Пример использования

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h1>Home Page</h1>`
})
export class HomeComponent {}

@Component({
  selector: 'app-about',
  template: `<h1>About Page</h1>`
})
export class AboutComponent {}

Как это работает на практике?

Теперь, когда у вас есть всё настроено, если вы запустите приложение и нажмете на ссылки "Home" или "About", Angular заменит содержимое внутри Router Outlet соответствующим компонентом. Это значит, что вы можете создавать одностраничные приложения (SPA), что значительно улучшает пользовательский опыт.

Заключение

Router Outlet — это основополагающая часть маршрутизации в Angular, и он облегчает динамическое загрузки компонентов на основе текущего маршрута. Понимание работы Router Outlet необходимо для разработки современных веб-приложений.