Ссылки в Angular 2 — Маршрутизация

Дата публикации: 2017-11-15

От автора: маршрутизация позволяет направлять пользователей на разные страницы на основе выбора, который они делают на главной странице. Следовательно, исходя из выбранного им варианта, пользователю будет предоставлен требуемый компонент Angular.

Давайте рассмотрим, как работают в приложении Angular ссылки, и как осуществляется маршрутизация.

Шаг 1 — Добавьте тег базовой ссылки в файл index.html.

<!DOCTYPE html>
<html>
  <head>
     <base href = "/">
     <title>Angular QuickStart</title>
     <meta charset = "UTF-8">
     <meta name = "viewport" content = "width = device-width, initial-scale = 1">
     
     <base href = "/">
     <link rel = "stylesheet" href = "styles.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src = "node_modules/core-js/client/shim.min.js"></script>
     <script src = "node_modules/zone.js/dist/zone.js"></script>
     <script src = "node_modules/systemjs/dist/system.src.js"></script>
     <script src = "systemjs.config.js"></script>
 
     <script>
        System.import('main.js').catch(function(err){ console.error(err); });
     </script>
  </head>
 
  <body>
     <my-app></my-app>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Angular QuickStart</title>

System.import('main.js').catch(function(err){ console.error(err); });

</script>

</head>

<body>

<my-app></my-app>

</body>

</html>

Шаг 2 — Создайте два маршрута для приложения. Для этого нужно добавить 2 файла с именами Inventory.component.ts и product.component.ts

Ссылки в Angular 2 — Маршрутизация

Шаг 3 — Поместите в файл product.component.ts следующий код.

import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: 'Products',
})
export   class   Appproduct  {
}

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

@Component ({

selector: 'my-app',

})

export class Appproduct {

}

Шаг 4 — Поместите в файл Inventory.component.ts следующий код.

import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: 'Inventory',
})
export class AppInventory  {
}

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

@Component ({

selector: 'my-app',

})

export class AppInventory {

}

Оба компонента не делают ничего особенного, просто отображают ключевые слова для данного конкретного компонента. Таким образом, для компонента Inventory пользователю будет отображаться ключевое слово Inventory. А для компонента products отобразится ключевое слово product.

Шаг 5 — добавьте следующий код в файл app.module.ts —

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';
 
const appRoutes: Routes = [
  { path: 'Product', component: Appproduct },
  { path: 'Inventory', component: AppInventory },
];
 
@NgModule ({
  imports: [ BrowserModule,
  RouterModule.forRoot(appRoutes)],
  declarations: [ AppComponent,Appproduct,AppInventory],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { Appproduct } from './product.component';

import { AppInventory } from './Inventory.component';

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [

{ path: 'Product', component: Appproduct },

{ path: 'Inventory', component: AppInventory },

];

@NgModule ({

imports: [ BrowserModule,

RouterModule.forRoot(appRoutes)],

declarations: [ AppComponent,Appproduct,AppInventory],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Отметим следующие моменты, касающиеся приведенного выше кода —

Приложения содержат 2 маршрута, один — к компоненту Appproduct, а другой — к компоненту AppInventory.

Убедитесь, что у вас объявлены оба компонента.

RouterModule.forRoot обеспечивает добавление маршрутов в приложение.

Шаг 6 — добавьте следующий код в файл app.component.ts.

import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: '
  <ul>
     <li><a [routerLink] = "['/Product']">Product</a></li>
     <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
  </ul>
  <router-outlet></router-outlet>'
})
export class AppComponent  { }

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

@Component ({

selector: 'my-app',

<ul>

<li><a [routerLink] = "['/Product']">Product</a></li>

<li><a [routerLink] = "['/Inventory']">Inventory</a></li>

</ul>

<router-outlet></router-outlet>'

})

export class AppComponent { }

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

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

Ссылки в Angular 2 — Маршрутизация

Теперь, если вы нажмете ссылку Inventory, вы получите следующий результат.

Ссылки в Angular 2 — Маршрутизация

Добавление маршрута ошибки

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

Шаг 1 — Добавьте компонент PageNotFound через файл NotFound.component.ts, как показано ниже:

Ссылки в Angular 2 — Маршрутизация

Шаг 2 — Добавьте в созданный файл следующий код.

import { Component } from '@angular/core';
 
@Component ({  
  selector: 'my-app',  
  template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

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

@Component ({

selector: 'my-app',

})

export class PageNotFoundComponent {

}

Шаг 3 — Добавьте в файл app.module.ts следующий код.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  
 
const appRoutes: Routes = [ 
  { path: 'Product', component: Appproduct }, 
  { path: 'Inventory', component: AppInventory }, 
  { path: '**', component: PageNotFoundComponent } 
];  
 
@NgModule ({ 
  imports: [ BrowserModule, 
  RouterModule.forRoot(appRoutes)], 
  declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
  bootstrap: [ AppComponent ] 
}) 
 
export class AppModule {
}

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { Appproduct } from './product.component'

import { AppInventory } from './Inventory.component'

import { PageNotFoundComponent } from './NotFound.component'

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [

{ path: 'Product', component: Appproduct },

{ path: 'Inventory', component: AppInventory },

{ path: '**', component: PageNotFoundComponent }

];

@NgModule ({

imports: [ BrowserModule,

RouterModule.forRoot(appRoutes)],

declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent],

bootstrap: [ AppComponent ]

})

export class AppModule {

}

Примечание: Теперь у нас есть дополнительный маршрут с именем ‘**’, компонент: PageNotFoundComponent. Следовательно, ** предназначен для любого маршрута, который не является маршрутом по умолчанию. Пользователь будет перенаправлен к компоненту PageNotFoundComponent.

Теперь сохраните весь код и запустите приложение с помощью npm. В браузере вы должны увидеть следующий результат. Теперь, когда вы перейдете по какой-либо некорректной ссылке, вы увидите следующее.

Ссылки в Angular 2 — Маршрутизация