Учебники

Угловой 4 — Маршрутизация

Декабрь 11, 2018

Маршрутизация в основном означает перемещение между страницами. Вы видели много сайтов со ссылками, которые направляют вас на новую страницу. Это может быть достигнуто с помощью маршрутизации. Здесь страницы, на которые мы ссылаемся, будут иметь форму компонентов. Мы уже видели, как создать компонент. Давайте теперь создадим компонент и посмотрим, как использовать с ним маршрутизацию.

В основной родительский компонент app.module.ts мы теперь должны включить модуль маршрутизатора, как показано ниже — 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

импортировать {RouterModule} из ‘@ angular / router’

Здесь RouterModule импортируется из angular / router. Модуль включен в импорт, как показано ниже — 

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule ссылается на forRoot, который принимает входные данные в виде массива, который, в свою очередь, имеет объект пути и компонент. Путь — это имя маршрутизатора, а компонент — это имя класса, т. Е. Созданный компонент.

Давайте теперь посмотрим на созданный компонентом файл —

New-cmp.component.ts 

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

Выделенный класс упоминается в импорте основного модуля.

New-cmp.component.html 

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Теперь нам нужно, чтобы вышеупомянутое содержимое из html-файла отображалось всякий раз, когда это было необходимо, или щелкнуло из основного модуля. Для этого нам нужно добавить сведения о маршрутизаторе в app.component.html . 

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>

<br />
<br/>
<router-outlet></router-outlet>

В приведенном выше коде мы создали тег ссылки привязки и дали routerLink как «new-cmp» . Это упоминается в app.module.ts как путь.

Когда пользователь щелкает новый компонент , на странице должно отображаться содержимое. Для этого нам понадобится следующий тег — <router-outlet> </ router-outlet> .

Приведенный выше тег гарантирует, что содержимое файла new-cmp.component.html будет отображаться на странице, когда пользователь щелкает новый компонент .

Давайте теперь посмотрим, как вывод отображается в браузере.

Кустом Труба-1

Когда пользователь нажимает Новый компонент, в браузере вы увидите следующее.

Кустом Труба-2

URL содержит http: // localhost: 4200 / new-cmp . Здесь new-cmp добавляется к исходному URL-адресу, который является путем, указанным в app.module.ts, и ссылкой на маршрутизатор в app.component.html .

Когда пользователь нажимает Новый компонент, страница не обновляется, и содержимое отображается пользователю без какой-либо перезагрузки. При нажатии будет загружена только определенная часть кода сайта. Эта функция помогает, когда у нас много контента на странице, и ее нужно загружать в зависимости от взаимодействия с пользователем. Эта функция также обеспечивает хорошее взаимодействие с пользователем, поскольку страница не перезагружается.

45
Share: