angular路由

前言

此篇是关于angular路由学习的笔记，根据大地老师的课整理

---

以下是本篇文章正文内容

路由的简单介绍

一、angular创建一个默认带路由的项目

1.命令行创建一个带路由的项目

ng new 项目名 --install-skip（routing——yes）
cd到项目目录下
cnpm install

2.创建需要的组件

ng g component components/home

3.找到app-routing.module.ts配置路由

(1)引入组件

import { NewsComponent } from './components/news/news.component';
import { ProductComponent } from './components/product/product.component';
import { HomeComponent } from './components/home/home.component';

(2)配置路由

const routes: Routes = [
{ path:'home',component:HomeComponent },
{ path:'news',component:NewsComponent },
{ path:'product',component:ProductComponent },
]

4.找到app.conmponent.html根组件模块，配置router-outlet显示动态加载的路由

<a [routerLink]="[ '/home' ]">首页</a>

  <a routerLink= '/news' >新闻组件</a><!--静态模块-->

  <a [routerLink]="[ '/product' ]">商品</a>

二、angular routerLink 跳转页面 默认路由

//匹配不到路由的时候加载的组件，或者跳转的路由
{ path:'**',/*任意的路由 */
//component:HomeComponent
redirectTo:'home' 
}

三、angular RouterLinkActive 设置 routerlink 默认选中路由

/*active是设定选中时的状态*/
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>

<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>

<a [routerLink]="[ '/product' ]" routerLinkActive="active">商品</a>

以下是css代码：

.active{
        color: red;
    }

路由的传值以及通过js跳转路由

一、get传值

1.跳转

  <ul>
      <li *ngFor="let item of list;let key=index">
          <a [routerLink]="[ '/newscontent' ]" [queryParams]="{aid:key,name:'zhangsan'}">跳转到新闻详情</a>
          <a href="#">{{key}}---{{item}}</a>
      </li>
  </ul>

2.接收

  //引入ActivatedRoute
      import { ActivatedRoute } from '@angular/router';
    //声明
      constructor(public route:ActivatedRoute) { }
    //获取get传值
      this.route.queryParams.subscribe((data)=>{

        console.log(data);
      })

动态路由

1.配置动态路由

  //aid动态路由
      { path:'newscontent/:aid',component:NewscontentComponent },

2.跳转

<ul>
  <li *ngFor="let item of list;let key=index">
      <a [routerLink]="[ '/newscontent' , key ]">{{key}}---{{item}}</a>
  </li>
</ul>

3.接收

   //引入ActivatedRoute
      import { ActivatedRoute } from '@angular/router';
    //声明
      constructor(public route:ActivatedRoute) { }
    //获取get传值
      this.route.params.subscribe((data)=>{

      console.log(data);
    })

二、js跳转路由

1.动态路由

	/*引入模块*/
  import { Router } from '@angular/router';

	/*声明模块*/
  constructor(public router:Router) { }
/*跳转*/
	//动态路由写第二个参数
    this.router.navigate(['/newscontent','123'])
	//静态  
    this.router.navigate(['/home'])

2.get传值

   //引入模块
      import { Router } from '@angular/router';
    //声明模块
      constructor(public router:Router) { }
    //跳转
      this.router.navigate(['/news'],{

        queryParams:{aid:123}
      });

三、父子路由，路由的嵌套

1.引入以及配置路由

（1）引入组件

/*引入路由时可以适当缩进以区分父子组件*/
import { HomeComponent } from './components/home/home.component';
  import { WelcomeComponent } from './components/home/welcome/welcome.component';
  import { SettingComponent } from './components/home/setting/setting.component';
import { ProductComponent } from './components/product/product.component';
  import { PcateComponent } from './components/product/pcate/pcate.component';
  import { PlistComponent } from './components/product/plist/plist.component';
import { NewsComponent } from './components/news/news.component';

（2）配置路由

配置父子路由时，只需在配置父路由的基础上在父路由里加一个children，在children里配置子路由。

path:'home',component:HomeComponent,
children:[

  {path:'welcome',component:WelcomeComponent},
  
  {path:'setting',component:SettingComponent},

  {path:'**',redirectTo:'welcome'}

]
  

3.在父组件中调用子组件（html）

在父组件后加个/子组件

 <a [routerLink]="[ '/home/welcome' ]" routerLinkActive="active">欢迎界面</a>

4.要想在一个页面中显示要在父组件模板中添加才能把子组件挂载到父组件中

<div class="right">
        <router-outlet></router-outlet>        
</div>

实例图片

如图，子组件的内容挂载到了右边，所以在右边的div中加入了

大地老师视频地址：https://www.bilibili.com/video/BV1yt411e7xV?p=35

未完待续