Angular 5.x 学习笔记之Router(路由)应用-tutorial js-php.cn

Angular 5.x 学习笔记之Router(路由)应用

亚连

Lepaskan： 2018-05-26 13:40:47

asal

1586 orang telah melayarinya

本篇文章主要介绍了Angular 5.x 学习笔记之Router(路由)应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

序言：

Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用

实例讲解

运行结果如下。设置了3个导航栏， Home、 About、Dashboard。点击不同的导航栏，跳转到相应的页面：

创建3个 component

ng g c home
ng g c about
ng g c dashboard

路由与配置

（1）**引入 Angular Router **

当用到 Angular Router 时，需要引入 RouterModule，如下：

// app.module.ts
import { RouterModule } from &#39;@angular/router&#39;;
imports: [
 BrowserModule, RouterModule
],

Salin selepas log masuk

（2）路由配置

还记得由谁来管理component 的吧，没错，由 module 来管理。所以，把新创建的 component，引入到 app.moudle 中。如下：

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

import { appRoutes } from &#39;./routerConfig&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { AboutComponent } from &#39;./components/about/about.component&#39;;
import { HomeComponent } from &#39;./components/home/home.component&#39;;
import { DashboardComponent } from &#39;./components/dashboard/dashboard.component&#39;;

Salin selepas log masuk

提示：注意component的路径，为便于管理，我们把新创建的component 移到了 components 文件夹中。

创建 Router Configure 文件

在 app 目录下，创建 routerConfig.ts 文件。代码如下：

import { Routes } from &#39;@angular/router&#39;;
import { HomeComponent } from &#39;./components/home/home.component&#39;;
import { AboutComponent } from &#39;./components/about/about.component&#39;;
import { DashboardComponent } from &#39;./components/dashboard/dashboard.component&#39;;

export const appRoutes: Routes = [
 { path: &#39;home&#39;, 
 component: HomeComponent 
 },
 {
 path: &#39;about&#39;,
 component: AboutComponent
 },
 { path: &#39;dashboard&#39;,
 component: DashboardComponent
 }
];

Salin selepas log masuk

说明： Angular 2.X 以上版本，开始使用 TypeScript 编写代码，而不再是 JavaScript，所以，文件的后缀是： ts 而不是 js

这个 routerConfigue 文件，怎么调用呢？需要把它加载到 app.module.ts 中，这是因为 app.moudle.ts 是整个Angular App 的入口。

// app.module.ts
import { appRoutes } from &#39;./routerConfig&#39;;
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Salin selepas log masuk

声明 Router Outlet

在 app.component.html 文件中，添加代码：

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Salin selepas log masuk

运行

进入到该工程所在的路径，运行；

ng serve --open

Salin selepas log masuk

当 webpack 编译成功后，在浏览器地址栏中，输入： http://localhost:4200

即可看到本篇开始的结果。

关于Router，换一种写法：

在 app.moudle.ts 文件中，代码如下：

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: &#39;home&#39;, 
   component: HomeComponent 
   },
   {
   path: &#39;about&#39;,
   component: AboutComponent
   },
   {
   path: &#39;dashboard&#39;,
   component: DashboardComponent
   }
  ]
  )
 ],

Salin selepas log masuk

这样一来，可以不用单独创建 routerConfigure.ts 文件。

小结

自从引入了面向组件（component）后，路由管理相比 AngularJS （1.X），方便了很多。

进一步优化：

或许你已经注意到，当访问 http://localhost:4200 时，它的路径应该是 “/”，我们应该设置这个默认的路径。

{
   path: &#39;&#39;,
   redirectTo:&#39;/home&#39;,
   pathMatch: &#39;full&#39;
   },

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

零基础学习AJAX之AJAX框架

零基础学习AJAX之制作自动校验的表单

ajax的get请求时缓存处理解决方法

Atas ialah kandungan terperinci Angular 5.x 学习笔记之Router(路由)应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Angular 5.x 学习笔记之Router(路由)应用