路由

Routing

1.新建一个带路由的Angular项目

　　ng  new demo-routing --routing

2.新建组件

　　ng g component components/home

　　ng g component components/news

　　ng g component components/user

3.在app-routing.moduke.ts中定义路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// 引入组件
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { UserComponent } from './components/user/user.component';
import { NewsInfoComponent } from './components/news-info/news-info.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'news',
    component: NewsComponent
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: '',

    // 1
    // component: HomeComponent  // 跳转到指定控件

    // 2
    redirectTo: 'home',  // 跳转到指定路由，也就是上面定义的Path
    pathMatch: 'full' // 匹配所有路径


    // 以上两种方法效果一样
  },
  {
    path: '**',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

　　并且定义导航栏

<ul>
  <li ><a [routerLink]="['/home']">首页</a></li>
  <li ><a [routerLink]="['/user']">用户</a></li>
  <li ><a [routerLink]="['/news']">新闻</a></li>
</ul>

　　<!-- 路由占位符 -->

　<router-outlet></router-outlet>  

4.使用js跳转路径

　　新建一个新闻详情组件

　　　　ng g component components/newsInfo

　    定义路由

import { NewsInfoComponent } from './components/news-info/news-info.component';

  {
    path: 'newsInfo/:id', // 带参
    component: NewsInfoComponent
  },

　　在新闻组件中写上事件

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

  newsList: any[] = [];
  constructor(private router: Router) {
    for (let i = 1; i <= 10; i++) {
      this.newsList.push('这是第' + i + '条新闻');
    }
  }
  goNewsInfo() {
    this.router.navigate(['/newsInfo', '123']);//带参，若不带参，不需要第二个餐宿
  }

　　news.component.html

<ul>
  <li *ngFor="let item of newsList">
    <a (click)="goNewsInfo()">{{item}}</a>
  </li>
</ul>

　　这里只是做个跳转页面的测试，其实所有的新闻都是进入同一个新闻详情页。

 5.get路由传值

　　home组件使用get请求跳转到user组件（参数为id，其实这里没有任何意义，只是为了演示get传值）

　　先定义home的内容

import { Router, NavigationExtras } from '@angular/router';

  goUser() {
    // get传值，也就是 http://localhost:4200/user?id=123 这种格式
    // 需要使用NavigationExtras进行参数的封装

    const param: NavigationExtras = {
      queryParams: { 'id': '112' }
    };
    this.router.navigate(['/user'], param);
  }

　　html

<button (click)="goUser()">get传值</button>

　　然后是user组件来接收这个传过来的值

import { ActivatedRoute } from '@angular/router'; // 获取动态传值参数

  constructor(private route: ActivatedRoute) {
    console.log(route.queryParams);//查看是否获取成功

    route.queryParams.subscribe(//取值
      (data) => {
        console.log(data);
      }
    );
  }

 6.子路由

　　一级导航栏：首页、商品

　　首页：欢迎页面

　　商品：商品列表、商品分类

　　这需要我们定义五个组件，即       home->welcome、shop->shopcate、shoplist

　　路由定义为：

{
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'welcome',
        component: WelcomeComponent
      },
      {
        path: '**',
        component: WelcomeComponent
      }
    ]
  },
  {
    path: 'shop',
    component: ShopComponent,
    children: [
      {
        path: 'shopcate',
        component: ShopcateComponent
      },
      {
        path: 'shoplist',
        component: ShoplistComponent
      },
      {
        path: '**',
        component: ShopcateComponent
      }
    ]
  },

　　这时候就需要把home和shop当作子组件的根组件

　　home

<div class="con">
  <div class="left">
       <a routerLink="/home/welcome">欢迎页面</a>
  </div>
  <div class="right">
    <!--动态加载的子组件放在这个里面-->
      <router-outlet></router-outlet>
  </div>
</div>

　　shop

<div class="con">
  <div class="left">
    <a routerLink="/shop/shoplist">商品列表</a>
    <a routerLink="/shop/shopcate">商品分类</a>
  </div>
  <div class="right">
    <!--动态加载的子组件放在这个里面-->
    <router-outlet></router-outlet>
  </div>
</div>

　　另外附上styles.css

/* You can add global styles to this file, and also import other style files */

*{
    margin:0px;
    padding: 0px;
}

.header{
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background: #000;
}

.header a{
    color: #fff;
}
.header a.active{
    color:red;
}





/**/

.con{
    display: flex;
}

.con .left{

    width: 200px;

    background: #fffeee;
    height: 300px;
    border-right: 1px solid #000;

}

.con .left a{
    display: block;
    height: 44px;
    text-align: center;

}

.con .right{

   flex: 1;
    height: 300px;
    
}