angular路由参数_angular路由配置以及使用

一、生成路由文件

按照惯例，有一个独立模块来配置相关路由，这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中。

使用CLI生成它。

ng generate module app-routing --flat --module=app

然后查看src/app目录下是否生成成功。

接下来，我们查看生成的文件：

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

import { CommonModule }from '@angular/common';

@NgModule({

imports: [

CommonModule

],

declarations: []

})

exportclass AppRoutingModule { }

二、导出 RouterModule

此刻的AppRoutingModule是这样的：

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

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

@NgModule({

exports: [ RouterModule ]

})

exportclass AppRoutingModule {}

三、添加路由定义

典型的Angular路由(Route)有两个属性：

1、path：一个用于匹配浏览器地址栏中URL的字符串。

2、component：当导航到此路由时，路由应该创建哪个组件。

如果说你希望当URL为http://localhost:4200/homePage时，首先要导入HomePageComponent；以便在Route中引用它。

如下：

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

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

import {Home