SIX angular 路由

周大胖子

1.添加angular 路由器 ；
2.使用 <a > 标签 和 一个 <router-outlet>  把 app.component 转换成一个导航用的壳组件；
3.在 app.routing.module 中配置路由器
4.简单路由，重定向路由 ， 参数化路由。
5.<a>标签的 routerLink 指令
6.多组间共享 heroService

在已有的项目中输入命令：

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

复制代码

注释： --flat 把这个文件放入src/app中， 而不是单独的目录中。 --module=app 告诉CLI 把它注册到 app.module.ts的imports数组中

周大胖子

        第一步：生成一个带路由的项目
               
                 cd C:\xiangmu  ====== ng new angular-routing-demo --routing
                【angular-routing-demo居然是项目名：讲课老师估计是疯了
                  这个项目比别的项目多了一个路由配置文件app/app-routing.module.ts
                  并且在app.module.ts文件里已经引入了路由模块，并且已经注入】
                【】
       

        第二步：创建组件
                        =ng g component components/模块


        第三步：在app-routing.module.ts文件里
                import { HemoComponent } from './components/hemo/hemo.component               
import { NewsComponent } from './components/news/news.component
                import { UserComponent } from './components/user/user.component
               
        第四步：配置路由
                const routes: Routes = [

                         {

                                path:'hemo',

                                component:HemoComponent,   //确定模块

                                children:[]                 //配置子组件的地方

                        },
                        {

                                path:'news',

                                component:NewsComponent,   //确定模块

                                children:[]                 //配置子组件的地方

                        }
                ]

        第五步：增加导航：

                导航跳转的a标签不是href 而是routerLink="模块"
               
                例如：  <li><a routerLink="news" >新闻</a></li>


        第六步：
                第一种玩法  6.1设置空路由【即在没有链接时候默认显示的路由值】
                  {

                          path:"",

                          redirectTo:"hemo",

                          pathMatch:"full"

                         }
               
                第二种玩法  6.2//设置匹配路由出错或者匹配不到路有时候加载的组件 可以替代上面的空路由

                  {

                              path:'**',  //表示任意路由【去掉404了】

                         // component:HemoComponent,   //确定模块

                        redirectTo:"hemo"  

                        //redirectTo这个与component不同，这是默认跳转路由URL改变  ，comp是加载模块不改变url

                 }

周大胖子

路由的 导航 a 标签 写法

        选中路由加载的class为active   =======   routerLinkActive="active"

        <ul class="lis_nav">

                 <li><a routerLink="hemo" routerLinkActive="active" >首页</a></li>
  
                 <li><a routerLink="news" routerLinkActive="active" >新闻</a></li>
  
                 <li><a routerLink="user" routerLinkActive="active" >用户</a></li>

        </ul>

周大胖子

动态路由 列表页与详情页
原理：通过动态路由、向详情页传值【这个值是在url里】
                （传值的两种方式 1.动态路由 newsinfo/aid   2.URL拼接：newsinfo?id=3）
       
        第一步：在app-routing.modules.ts文件里 引入newsinfo组件
               
                import { NewsinfoComponent } from './components/newsinfo/newsinfo.component
        第二步：配置动态路由样子和以前一样    /:aid

                  {
   
                        // 动态路由、/:aid
   
                        path:'newsinfo/:aid',
  
                        component:NewsinfoComponent

                   },

        第三步：在news的html文件写入跳转到详情页的链接
               
                例如：
            <li><a routerLink="/newsinfo/1" >新闻标题1</a></li>

   
                                <li><a routerLink="/newsinfo/2"  >新闻标题2</a></li>

   
                                <li><a routerLink="/newsinfo/3"  >新闻标题3</a></li>


        第四步：在newsinfo的ts文件里引入模块 ActivatedRoute 用于接收动态路由的值

                import { ActivatedRoute } from '@angular/router
        第五步：在下方的构造函数内申明该模块【就是实例化的意思】

                constructor( private route:ActivatedRoute ) { }

        第六步：初始化时，获取该值 params里的aid，并做相应的处理【拿值向后台请求数据】
               
                  ngOnInit() {

  
                          this.route.params.subscribe(function(e){
      
                          console.log(e)  
      
                        // alert(e.aid)
   
                                })

  
                  }

周大胖子

路由的JS跳转【例如登录后的跳转】
第一步：在登录的.ts文件里【即没跳的页面】引入Router模块

                import { Router } from '@angular/router

        第二步：初始化【即实例化】

                 constructor(private router:Router ) { }

        第三步：JS路由跳转
               
                 this.router.navigate(['/news'])

        【
                备注：跳转到动态路由，需要带上参数 否则则按照找不到路由处理，
                         // 第二个参数用 ， 隔开 系统会自动拼接，第三个参数再加 ，号
                this.router.navigate(['/newsinfo','123'])       
       
        】

周大胖子

路由的 git传参
        原理：用的是JS传参的方式，配置参数

        准备工作：在路由app-routing.module.ts文件里引入模块并写入路由【注意写法，我被坑的好惨】
                       
                引入模块：import { LlkComponent } from './components/llk/llk.component                写入路由：
                 {
    path:'llk',       //这是get传值的写法
    componentlkComponent
  },


        第一步：在【即没跳的页面】的.ts文件里引入  NavigationError 模块并写函数
               
                import { Router , NavigationError } from '@angular/router               
                  // GIT传参
  
                gollk(aid,mav,name){
   
   
                                 let navigationExtras:NavigationExtras={
      
                                queryParams:{
  'aid': aid,
'mvt': mav,
   'user': name
}
   
                         };
   
                         // this.router.navigate(['/llk','abc'])
   
   
                         // get后面的参数是拼进去的
   
                         this.router.navigate(['/llk'],navigationExtras)

                 }

        第二步：在跳转到的.ts文件里 引入JS时候使用的跳转接收模块
               
                import { ActivatedRoute } from '@angular/router
        第三步：在跳转到的.ts文件里申明

                constructor(private route:ActivatedRoute ) { }

        第四步：接收值
               
                this.route.queryParams.subscribe(function(e){
  console.log(e)
   })

        【注意：
                    //params获取动态路由

    // get传值使用 queryParams 接收
        】

周大胖子

父子路由

        第一步：创建子组件。在app-routing.module.ts文件里引入要路由的模块。 并配置

          {
   
                path:'user',
   
                component:UserComponent,  
                //配置子路由
                children:[
                                {
         
                                 path:'bbk',
         
                                 component:BbkComponent
        
                                },
        
                                {
         
                                 path:'bbl',

                                 component:BblComponent
        
                                }
   
                        ]                 
           },
               


        第二步：将子路由模块引入到父路由的.ts的文件里 注意路径
               

        第三部：父组件的.html中定义
                <router-outlet></router-outlet>

        第四步：标签
                <a routerLink="bbl"  routerLinkActive="active">跳转到BBL</a>