6.路由

作者: 佐伊er | 来源:发表于2018-01-17 14:43 被阅读0次
一. 配置基础路由

1.确保index.html顶部有<base href="/">

2.让路由器可用,导入RouterModule并添加到AppModule的imports数组中。
path: 路由器会用它来匹配浏览器地址栏中的地址;
component: 导航到此路由时,路由器需要创建的组件

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

RouterModule.forRoot([
  {
    path: 'heroes',
    component: HeroesComponent
  }
])

3.路由出口(Outlet)
把<router-outlet>标签添加到模板的底部

template: `
   <h1>{{title}}</h1>
   <a routerLink="/heroes">Heroes</a>
   <router-outlet></router-outlet>
 `
二 . 配置带参数的路由

1.在module定义路由

{
   path:'detail/:id',
   component:HeroDetailComponent
}

2.导入语句

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location }                 from '@angular/common';

import { HeroService } from './hero.service';

import 'rxjs/add/operator/switchMap';

3.构造函数,保存私有变量

constructor(
  private heroService:HeroService,
  private route:ActivatedRoute,
  private location: Location
){}

4.实现OnInit接口

implements OnInit{
  ngOnInit(){
  this.route.paramMap.switchMap((params:ParamMap) => 
  this.heroService.getHero(+params.get('id'))).subscribe(hero => 
  this.hero = hero);
  }
}

5.在hero.service.ts中添加getHero()方法

getHero(id:number):Promise<Hero>{
  return this.getHeroes().then(heroes => heroes.find(hero => hero.id ===id));
}

6.模板跳转 routerLink

<a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]" >
三.返回路由
goBack(){
  this.location.back();
}
四.重构路由为路由模块

1.在app-routing.module.ts中import

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
 
const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];
 
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

2.修改app.module.ts
原来的

import { RouterModule }  from '@angular/router';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path:'',
        redirectTo:'/dashboard',
        pathMatch:'full'
      },{
        path:"heroes",
        component:HeroesComponent
      },{
        path:"dashboard",
        component:DashboardComponent
      },{
        path:"detail/:id",
        component:HeroDetailComponent
      }
    ])
  ]
})

修改后的

import { AppRoutingModule }     from './app-routing.module';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ]
})

相关文章

  • 6.路由

    一. 配置基础路由 1.确保index.html顶部有 2.让路由器可用,导入RouterModule并添加到Ap...

  • vue快速上手-2

    6. vue路由 route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由; routes:它...

  • flutter功能收集

    6.注解与路由https://segmentfault.com/a/1190000018501092 https:...

  • 网络和多媒体知识(2)

    6.路由选择策略 静态路由选择(不能根据网络流量和拓扑结构的变化来调整自身的路由表,也就不能找出最佳路由): 固定...

  • 6.路由守卫

    canActivate实例 在app新建一个目录,guard,新建一个ts. 效果: 反之,当随机数小于0,然后商...

  • 6.正向路由

    必须学会正向路由 1. 路由 将url与视图进行绑定. (路由用于维护url与视图之间 关系.) 通过正则匹配...

  • 路由器

    路由器 apps/school/urls.py: 6. 限流 限流的配置,可以直接从官网上爬取源码https://...

  • 路由器

    路由器 apps/school/urls.py: 6. 限流 限流的配置,可以直接从官网上爬取源码https://...

  • django-rest-framework的使用

    1.安装 配置 3.路由分发 4.定义资源 5.类视图的书写 6.序列化模块的书写 serializers.py

  • Vue十个技巧(一)

    1.路由参数解耦 2.函数式组件 3.样式穿透 4.watch高阶使用 5.watch监听多个变量 6.事件参数$...

网友评论

      本文标题:6.路由

      本文链接:https://www.haomeiwen.com/subject/ihfsoxtx.html