使用Angular Router导航基础

–>

名称

简介

Routes

路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件。

RouterOutlet

在HTML中标记路由内容呈现位置的占位符指令。

Router

负责在运行时执行路由的对象,可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定路由。

routerLink

在HTML中申明路由导航用的指令。

ActivatedRoute

当前激活的路由对象,保存着当前路由的信息,如路由地址,路由参数等。

实例:

1.创建一个Angular Router项目;(ng new Router -routing)

2.新建两个组件home和product;

  ng g component home

  ng g component product

完成后项目结构截图

使用Angular Router导航基础

3.配置app.routing.module.ts文件如下

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeeComponent} from "./homee/homee.component";
import {ProductComponent} from "./product/product.component";

const routes: Routes = [
  {path: '', component: HomeeComponent},
  {path: 'product', component: ProductComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4.修改app.component.html文件如下

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a>


<router-outlet></router-outlet>

保存,运行,angular router导航基础完成

使用Angular Router导航基础使用Angular Router导航基础

 

原文链接:http://www.cnblogs.com/webq1999/p/7919429.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章