Angular学习系列九：路由

当ng new 新项目时，会问是否加入路由，选择yes即可

具体表现：在app.moudle.ts中，引入路由：import { AppRoutingModule } from './app-routing.module';并配置：imports中加入 AppRoutingModule

　　　　　在app.component.html中已有标签：<!-- 动态加载路由 --> <router-outlet></router-outlet>

学习目标：路由配置

1：先建组件:new和products : ng g component components/news  和 ng g component components/products

2：在app.routing.moudle.ts中引入组件

//先建的
import { ProductsComponent } from './components/products/products.component';
import { NewsComponent } from './components/news/news.component';

配置路由：

const routes: Routes = [

  {
    path:"news",
    component:NewsComponent,
  },
  {
    path:"products",
    component:ProductsComponent,
  },
  // {
  //   path:"**",//默认跳转的路由
  //   redirectTo:"news",
  // }
{
  path:"",
  redirectTo:'/home',
  pathMatch:"full",
} 

];

3：在app.component.html中加入路径，进行跳转

<header class="header">
    <a [routerLink]="['/news']">新闻(使用属性[routerLink]绑定数据)</a>

    <br>
    <a routerLink="/products">商品(常规属性)</a>
 
</header>

效果图：

 

 

 4：选中点击的链接：routerLinkActive

app.component.html:

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

app.component.css

.active{
    color:red;
    background-color: yellow;
}

 

5：get获取动态传值和静态传值

    首先在商品页面新增商品列表：

product.component.html

get传值：
<ul>
    <li *ngFor="let item of list;let key=index;">    
        <a [routerLink]="['/productdetail']" [queryParams]="{aid:key}" routerLinkActive="active" >        
            {{item}}
        </a>
    </li>
</ul>

动态传值：
<ul>
    <li *ngFor="let item of list;let key=index;">
        <a [routerLink]="['/product-detail',key]"  routerLinkActive="active" >
            {{item}}
        </a>
    </li>
</ul>

product.component.ts

 public list:any[]=[];
  constructor() { }

  ngOnInit() {
    for(var i=0;i<10;i++){
      this.list.push("apple"+i);
    }
  }

 在 app.moudle.ts 文件中引入对应的productdetail.component并且加入如下路由配置：

  {
    path: "productdetail",
    component: ProductDetailComponent,
  },
  {
    path: "product-detail/:aid",
    component: ProductDetailComponent,
  }

 

然后新增商品详情页面并且过去url传值：  ng g component components/product-detail

product-detail.component.html

<p>product-detail works!</p>
   get路由传值：{{message}}
<br>
4    动态路由传值：{{message2}}

 

在product-detail.component.ts中引入：import { ActivatedRoute } from '@angular/router';

获取get路由传值和动态路由传值的方式

product-detail.component.ts

import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  constructor(public rou: ActivatedRoute) { }

  message :string ="";
  message2:string="";
  ngOnInit() {

    //get路由传值
    console.log(this.rou);
    this.rou.queryParams.subscribe((data)=>{
      this.message = JSON.stringify(data);
      console.log("get传值："+JSON.stringify(data) );
    })

    //动态路由传值：
    this.rou.params.subscribe((data)=>{
      this.message2 = JSON.stringify(data);
      console.log("get 动态传值："+JSON.stringify(data) );
    })
  }

}

 

效果图：