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{ 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; }