Angular router — это библиотека маршрутизации, упакованная как @angular/router. Он позволяет пользователю переходить от одного компонента к другому без перезагрузки страницы.
Чтобы включить маршрутизацию, нам необходимо выполнить следующие действия:
Чтобы приложение знало, что нам нужно выполнить маршрутизацию, требуется импорт конфигурации маршрутизации в приложение. Это можно сделать с помощью команды:
импортировать { RouterModule, Routes } из ‘@angular/router’;
RouterModule требуется для определения массива пути и пункта назначения.
const ROUTES: Routes = [
{путь: 'логин', компонент: компонент входа},
{путь: 'регистрация', компонент: компонент подписки
];
После этого нам нужно передать массив маршрутов в модуль маршрутизации с помощью метода forRoot().
импортирует: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot(ROUTES)
],
В конце нам нужно сообщить приложению Angular, где разместить наш визуализированный компонент. Для этого используем ‹router-outlet›.
Файл app.module.ts будет выглядеть так:
импорт {BrowserModule} из '@angular/platform-browser';
импорт {NgModule } из '@angular/core';
импорт {HttpModule } из '@angular /http';
импортировать {FormsModule} из @angular/forms';
импортировать { Routes, RouterModule } из @angular/router';
импортировать { AppComponent } из './app.component';
импортировать { LoginComponent } из './login/login.component';
импортировать { SignupComponent } из './signup/signup.component';
const ROUTES: Routes = [
{path:'login',component:LoginComponent},
{path:'signup',component:SignupComponent}
]
@NgModule({
объявления: [
AppComponent,
LoginComponent,
SignupComponent
],
импортирует: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot(ROUTES)
],
провайдеры: [],
начальная загрузка: [AppComponent]
})
экспорт класса AppModule { }
Мы использовали компонент заголовка, чтобы разместить в нем кнопку входа и регистрации.
Директива routerLink используется для маршрутизации к компонентам входа и регистрации.
Файл Header.component.html будет выглядеть так:
‹nav class=”navbar navbar-expand-sm bg-dark navbar-dark”›
‹div class="контейнер"›
‹div class="navbar-brand" ›Приложение Angular‹/div›
‹div class="nav-item"›
‹a class="text-warning" routerLink="signup"› Зарегистрироваться ‹/a›
‹/div›
‹div class="nav-item"›
‹a class="text-warning" routerLink="login"› Войти ‹/a›
‹/div›
‹/div›
‹/nav›
Наконец, мы можем увидеть вывод на экране следующим образом.
По любому вопросу или предложению вы можете связаться со мной в Твиттере.
