首页 学习 前端知识学习 AngularJS

继续使用上一节项目 angulardemo11

# Get 传值

# 1. 跳转

<ul>
    <li *ngFor="let item of list;let key=index">
        <!-- <a href="/newscontent?aid=123">{{key}} -- {{item}}</a> -->
        <a [routerLink]="[ '/newscontent' ]" [queryParams]="{aid:key}">{{key}} -- {{item}}</a>
    </li>
</ul>

# 2. 接收

import { ActivatedRoute } from '@angular/router';
   constructor(public route:ActivatedRoute) { }
   this.route.queryParams.subscribe(params => {
      console.log(params)
   })
# 动态路由
# 1. 配置动态路由
{
    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. 接收
this.route.params.subscribe(params=>{
      console.log(params)
    })
# 跳转路由
# JS 跳转路由
# 1. 引入、声明模块
import { Router } from '@angular/router'
constructor(public router:Router) { }
# 2. 跳转
this.router.navigate(['/home'])
this.router.navigate(['/newscontent/', '1243'])  // 带参数跳转
# Get 传值跳转
# 1. 引入、声明模块
import { Router, NavigationExtras } from '@angular/router'
constructor(public router:Router) { }
# 2. 跳转
// 跳转并进行传值
    let navigationExtras:NavigationExtras = {
      queryParams: {'aid': 123}
    }
    this.router.navigate(['/news'], navigationExtras)
    // 下面不使用 NavigationExtras 也可以跳转
    let queryParams = {
      queryParams: {'aid': 456}
    }
    this.router.navigate(['/news'], queryParams)
# 详细代码
# product 组件
# product.component.html
<p>product works!</p>
<br>
<br>
<a [routerLink]="['/productcontent/', '1234']">跳转到商品详情</a> 
<br>
<br>
<button (click)="goNewsContent()">JS跳转路由</button>
<br>
<br>
<button (click)="goHome()">JS跳转到首页</button>
<br>
<br>
<button (click)="goNews()">Get传值跳转路由</button>
# product.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router'
/**
 * JS 跳转路由
 * 1. 动态路由
 * 
 * 1. 引入、声明模块
 * import {Router} from '@angular/router'
 *   constructor (public router:Router) { }
 * 2. 跳转
 * this.router.navigate (['/home'])
 * this.router.navigate (['/newscontent/', '1243'])
 * 
 * 2.get 传值
 * 1. 引入、声明模块
 * import { Router, NavigationExtras } from '@angular/router'
 * constructor (public router:Router) { }
 * 2. 跳转
 * this.router.navigate (['/news'], {
      queryParams: {'aid': 456}
    })
    let navigationExtras:NavigationExtras = {
      queryParams: {'aid': 123}
    }
    this.router.navigate (['/news'], navigationExtras)
 */
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  constructor(public router:Router) { }
  ngOnInit(): void {
  }
  goNewsContent(){
    console.log('goNewsContent');
    // 路由跳转，适合普通路由和动态路由
    this.router.navigate(['/newscontent/', '1243'])
  }
  goHome(){
    this.router.navigate(['/home'])
  }
  goNews(){
    // 跳转并进行传值
    let navigationExtras:NavigationExtras = {
      queryParams: {'aid': 123}
    }
    this.router.navigate(['/news'], navigationExtras)
    // 下面不使用 NavigationExtras 也可以跳转
    let queryParams = {
      queryParams: {'aid': 456}
    }
    this.router.navigate(['/news'], queryParams)
  }
}