详解angular2实现ng2-router 路由和嵌套路由
实现ng2-router路由，嵌套路由
首先配置angular2的时候router模块已经下载，只需要引入即可
import {RouterModule, Routes} from "@angular/router";
我们要创建一个嵌套路由，所以需要创建以下文件
- index.html
- app.module.ts
- app.component.ts
- home.component.ts
- list.component.ts
- list-one.component.ts
- list-two.component.ts
实现效果：
- 路由，单机“首页”加载home.component.ts
- 单机"列表“加载list.component.ts
- 列表中包含嵌套路由，tab页
- 单机"标签一"加载list-one.component.ts
- 单机"标签二"加载list-one.component.ts
开始配置
index.html界面配置两点
<head>标签中引入 <meta href="/" rel="external nofollow" />
引入路由代码显示标签 引入主组件标签 <my-app></my-app>
就这么简单， index.html界面配置完毕
app.module.ts界面配置路由
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
// 表单 双向数据绑定
import {FormsModule} from "@angular/forms";
import {AppComponent} from "./app.component";
// List中包含两个tab子组件
import {ListComponent} from "./list.component";
import {ListOneComponent} from "./list-one.component";
import {ListTwoComponent} from "./list-two.component";
import {HomeComponent} from "./home.component";
// 定义路由, bootstrap默认加载组件就是AppComponent,所以他就是主页导航页,然后添加的路由都在他的模板中。
// 可以所有代码写在NgModule中, 也可以这样自定义常量,然后使用。
// 定义常量 嵌套自路由
const appChildRoutes: Routes = [
{path: "one", component: ListOneComponent},
{path: "two", component: ListTwoComponent},
// 如果地址栏中输入没有定义的路由就跳转到one路由界面
{
path: '**', redirectTo: "one"
}
];
// 定义常量 路由
const appRoutes:Routes = [
{path: '', component: HomeComponent},
{
path: 'list',
component: ListComponent,
children: appChildRoutes
];
// 引用定义的路由
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes)
],
declarations: [
AppComponent,
ListComponent,
HomeComponent,
ListOneComponent,
ListTwoComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
这样就完成了嵌套路由的配置
显示路由内容
app.component.ts
import {Component} from "@angular/core";
@Component({
selector: "my-app",
// templateUrl: "../views/one.html"
template: `
<div>
<!--使用了bootstrap样式的导航，routerLinkActive，表示路由激活的时候，谈价active类样式-->
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="home">首页</a></li>
<li routerLinkActive="active"><a routerLink="contact">联系我们</a></li>
<li routerLinkActive="active"><a routerLink="product">产品</a></li>
</ul>
<!--路由内容显示区域-->
<router-outlet></router-outlet>
</div>
`
})
export class AppComponent {
}
list.component.ts
import {Component} from "@angular/core";
@Component({
selector: "my-list",
// templateUrl: "../views/list.html"
template: `
<div>
<!-- 子路由连接 -->
<a routerLink="one">one</a>
<a routerLink="two">two</a>
<!-- 路由内容显示标签 -->
<router-outlet></router-outlet>
</div>
`
})
export class ListComponent {
name = "list";
}
list-one.component.ts
import {Component} from "@angular/core"
@Component({
selector: "my-list-one",
template:`
{{name}}
`
})
export class ListOneComponent {
name = "list-one";
}
list-two.component.ts同理
获取路由参数id (about:id) 添加模块 ActivatedRoute
import {ActivatedRoute} from "@angular/router";
export class AboutList {
id: Object;
constructor(public route:ActivatedRoute) {
this.id = {};
}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params // {id: "xxx"}
});
}
}
直接获取id值
this.route.snapshot.params["id"]
补助： 路由中的界面跳转
import {Router} from "@angular/router";
constructor(public router: Router) {
// 相当于window.location.href，界面跳转
router.navigateByUrl('home');
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS通过ng-route实现基本的路由功能实例详解
本文实例讲述了AngularJS通过ng-route实现基本的路由功能.分享给大家供大家参考,具体如下: 为什么需要前端路由~ (1)AJAX不会留下History历史记录 (2)用户无法通过URL进入应用指定的页面(书签或者分享等) (3)AJAX对于SEO是一个灾难 1.一般情况下,我们访问网页的时候,是通过url地址. 比如我们访问一个网页:https://www.baidu.com/index/fix.html 在AngularJS中通过"#"来进行不同页面的路由,比如: ht
-
使用AngularJS对路由进行安全性处理的方法
简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授
-
angular.js 路由及页面传参示例
页面传参数方法:1.$rootScope.2.(url)/user/:name/:age. 页面转换方法:1.href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" .2.$state.Go.3.$location.path.4.ui-sref (1)自带路由ngRoute <html> <head&g
-
Angular 4.x 路由快速入门学习
路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据.这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面. 接下来我们将按照以下目录的内容,介绍 Angular 的路由.具体目录如下: 目录 Installing the router Base href Using the router RouterModule.forRoot RouterModule.forChild Configuring a route Displaying r
-
AngularJS路由实现页面跳转实例
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo
-
Angularjs制作简单的路由功能demo
从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri
-
angularjs路由传值$routeParams详解
AngularJS利用路由传值,供大家参考,具体内容如下 1.导包 <script src="angular.min.js"></script> <script src="angular-route.js"></script> 2.依赖注入ngRoute var myapp=angular.module("myapp",["ngRoute"]); 3.配置路由 myapp.con
-
angular2中router路由跳转navigate的使用与刷新页面问题详解
本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍: 一.router.navigate的使用 navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo :
-
Angular2学习笔记——详解路由器模型（Router）
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa
-
AngularJS 路由详解和简单实例
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r