Angular学习笔记（第三天）

一、Angular的网络通信：

回顾：①ajax ②$.get/post ③axios ④promise ⑤async/await ⑥fetch

Angular:

 1、基于rxjs（由微软所推出的一种处理异步请求的处理方案）这种方案来处理网络通信的

 1.1 准备
    根模块：

     app.module.ts

 1.2 导入：
     import {HttpClientModule} from '@angular/common/http'
     @NgModule({
       imports:[HttpClientModule]
     })

 1.3 请求：
    ②发起网络请求
     import {HttpClient} from '@angular/common/http'

     constructor(private myHttp:HttpClient){}

     this.myHttp.get/post().subscribe((result)=>{})

2、路由

 ①创建一个自定义的模块(路由)
      ng g module my-module --routing

  ②配置路由词典信息
        指定一个容器:
      <router-outlet></router-outlet>

    创建组件
          ng g componet demo13-login
     
    配置路由
     forChild-->forRoot
     const routes:Routes = [
       {path:"",component:**}
     ]

     ③根模块中调用自定义的模块
      app.module.ts
      import {MyModuleRoutingModule} from './my-module/my-module-routing.module'
      @NgModule({
        imports:[MyModuleRoutingModule]
      })
      
     注意事项:
      ①设置路由信息时，路由地址无需以/开头
      写上/，是会报错的
      ②如何需要设置路由地址为空 要访问谁，指定path为""(空字符串)

      路由匹配规则:
      ①路由地址为空 path:""
      ②指定某一个确定的路由地址 path:"login"
      ③异常处理 path:"**"
      ④顺序，应该将先设置为空的，再设置具体路由，最后设置异常情况

   2、跳转和传参

          2.1 跳转：

             -- 编程式导航
               import {Router} from '@angular/router'

                constructor(private myRouter:Router){}
      
                this.myRouter.navigateByUrl('register')

            -- 属性来指定跳转
             <any routerLink="/detail"></any>

          2.2  传参:

                ①配置接收方的路由地址
                     detail --> detail/:id
                ②发送
                    this.myRouter.navigateByUrl("detail/10")
                    this.myRouter.navigateByUrl("detail/"+this.id)

                  标签：
                      <any routerLink="/detail/10"></any>
                     <any routerLink="/detail/{{id}}"></any>
                      <any [routerLink]="'/detail/'+id"></any>

                ③接收
                    //vue: this.$route.params.id
                    import {ActivatedRoute} from '@angular/router'
                     constrcutor(private myRoute:ActivatedRoute){}
                   this.myRoute.params.subscribe((result)=>{
                   //result.id
                   })

                2.3  路由嵌套

                       概念:在一个spa，某一个路由地址对应的组件，组件内部，又需要动态的加载其它的组件
                                （一个路由对象中 又嵌套了其它的路由对象）

                       ①指定一个容器(路由出口)
                           <router-outlet></router-outlet>

                       ②配置路由
                            {
                                 path:'email',
                                  component:EmailComponent,
                                  children:[
                                   {path:'inbox',component:***},
                                     。。。。
                                      ]
                              }

               2.4 路由守卫

                      路由守卫是用来指定一个路由对象是否允许被访问

                      在angular中 路由守卫都是通过服务来实现的
                      服务的使用流程:
                     ①创建一个服务类
                       ng g service guard
                     ②在服务类中 实现执行判断的方法
                     ③调用服务

   3. 总结:
                ①数据
                 组件间内部通信:
                   props down (Input)
                   events up(Output,EventEmitter,$event)
           网络通信：
                   HttpClient( HttpClientModule,subscribe)
           路由传参:
                   ActivatedRoute
                  ②显示
                   {{}}
                   各种指令 *ngFor/*ngIf/*ngSwitchCase..
                    管道 （筛选、过滤、格式化）
                   ③交互
                     ()
                    [(ngModel)]
                    []
                    ④路由
                    路由模块 可以做导航和传参