天天看點

angular頁面跳轉時,用get傳值和動态路由跳轉傳值

前提在把路由跳轉路線寫好

const routes: Routes = [
  {
    path: 'bottom',component:BottomMuduleComponent
  },
  {
    path: 'header',component:HeaderModuleComponent
  },
  {
    path: 'main',component:MainMoudleComponent
  },
  {
    path: 'slidebar',component:SlidebarModuleComponent 
  },
  {
    path: 'news',component:NewsComponent 
  },
  {
    path: 'newscontent',component:NewscontentComponent
  },
  {
    //預設路由,放置在最後
    path: '**',component:SlidebarModuleComponent 
  },

];
           

//get 傳值

// 1 跳轉(在跳轉頁面将值傳入到跳轉後的頁面)

// <ol>
//   <li *ngFor="let item of list;let key=index">
//     <!-- <a>{{key}}--------- {{item}}</a> -->
//     <a [routerLink]="['/newscontent']" [queryParams]="{adi:key}">{{key}} ----{{item}}</a>
//   </li>
// </ol>
           

注:queryParams可以在get連結後面帶入參數,他是一個對象

http://localhost:8000/newscontent?adi=9

// 2 接收(在跳轉之後的頁面接收跳轉之前的頁面

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

// constructor(public route:ActivatedRoute) { }

// this.route.queryParams.subscribe((data)=>{
//   console.log(data);
           

angular 動态路由跳轉傳值

//1 配置路由

// {
//   path: 'newscontent/:aid',component:NewscontentComponent
// }
//

           

2 傳值

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

           

/3 接收

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

// constructor(public route:ActivatedRoute) { }

// this.route.parmas.subscribe((data)=>{
//   console.log(data);