Tìm hiểu Routing trong Angular 7

Routing trong Angular về cơ bản có nghĩa là điều hướng giữa các trang. Bạn đã thấy nhiều trang web có liên kết dẫn bạn đến một trang mới. Điều này có thể đạt được bằng cách sử dụng Routing. Ở đây, các trang mà chúng tôi đang đề cập đến sẽ ở dạng các Component. Chúng ta đã biết cách tạo một thành phần. Bây giờ chúng ta hãy tạo một thành phần và xem cách sử dụng routing với nó.

Chúng ta phải import AppRoutingModule trong file app.module.ts

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

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

import { AppRoutingModule } from './app-routing.module'; 

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, 

      AppRoutingModule 

   ], 

   providers: [], 

   bootstrap: [AppComponent] 

})

export class AppModule { }

AppRoutingModule là tên class của component routing chúng ta đặt tên file như sau

app-routing.module bao gồm những cấu trúc của một file routing

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

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

const routes: Routes = [];

@NgModule({ 

   imports: [

      RouterModule.forRoot(routes)

   ],

   exports: [RouterModule] 

}) 

export class AppRoutingModule { }

Ở trên là dạng default của một routing trong một project để sử dụng được routing in angular bạn phải khai báo ở file app.component.html như sau:

<h1>Angular 7 Routing Demo</h1> 

<router-outlet></router-outlet>

Bây giờ chúng ta làm một ví dụ để thực hiện routing tron angular với 2 component home và about như sau

Tạo component Home

cú pháp:

ng g c home

or

ng g component home

home.component.html

<h1>{{home | uppercase}}</h1>

home.component.ts

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

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html',

  styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit {

  home='Home';

  constructor() { }

  ngOnInit(): void {

  }

}

Tạo component About

cú pháp:

ng g c about

about.component.html

<h1>{{txtAbout |uppercase}}</h1>

about.component.ts

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

@Component({

  selector: 'app-about',

  templateUrl: './about.component.html',

  styleUrls: ['./about.component.css']

})

export class AboutComponent implements OnInit {

  txtAbout="About";

  constructor() { }

  ngOnInit(): void {

  }

}

Ở trong file app.module.ts như sau chúng ta cần thêm 2 component vừa mói được tạo ra

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

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

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

import { ChangeTextDirective } from './change-text.directive';

import { AppRoutingModule, RoutingComponet } from './app-routing.module';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

@NgModule({

  declarations: [

    AppComponent,

    ChangeTextDirective,

    HomeComponent,

    AboutComponent,

    RoutingComponet

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Giờ đây chúng ta tiếp tục tìm đến file app-routing.module.ts và thiết lập nó

import { NgModel } from "@angular/forms";

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

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

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

const router:Routes=[

    {path:"home",component:HomeComponent},

    {path:"about",component:AboutComponent},

    {path:'', redirectTo:'about',pathMatch:'full'}

];

@NgModule({

    imports:[

        RouterModule.forRoot(router)

    ],

    exports :[

        RouterModule

    ]

})

export class AppRoutingModule{} export const RoutingComponet =[HomeComponent,AboutComponent]

Chỉ cần khởi tạo một hằng số router với một mảng liên kết 

Bước tiếp theo khá quan trong để sử dụng routing hãy tìm đến file app.component.html và khởi tạo nó

<div style = "text-align:center">

  <h1>Welcome to {{title}}.</h1>

  <nav> 

    <a routerLink = "/home">Home</a> 

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

 </nav> 

</div>

<div>

  <router-outlet></router-outlet>

</div>