zoukankan      html  css  js  c++  java
  • angular中的动态路由

    1.配置动态路由

    const routes: Routes = [
      {path: 'home', component: HomeComponent},
      {path: 'news', component: NewsComponent},
      {path: 'newscontent/:id', component: NewscontentComponent},
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    } ];

    2.跳转传值

    <a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a> 
    <a routerLink="/newscontent/{{aid}}">跳转到详情</a>

    3.获取动态路由的值

    import { ActivatedRoute} from '@angular/router';
       constructor( private route: ActivatedRoute) { }
    ngOnInit() {
      console.log(this.route.params);
      this.route.params.subscribe(data=>this.id=data.id);
    }

    动态路由的 js 跳转

    1. 引入

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

    2.初始化

    xport class HomeComponent implements OnInit { constructor(private router: Router) {
    }
      ngOnInit() {
      }
    goNews(){
    // this.router.navigate(['/news', hero.id]);
         this.router.navigate(['/news']);
      }
    }

    3.路由跳转

    this.router.navigate(['/news', hero.id]);

    路由 get 传值 js 跳转

    1. 引入 NavigationExtras

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

    2.定义一个 goNewsContent 方法执行跳转,用 NavigationExtras 配置传参。

    goNewsContent(){
         let navigationExtras: NavigationExtras = {
           queryParams: { 'session_id': '123' },
           fragment: 'anchor'
    };
         this.router.navigate(['/news'],navigationExtras);
      }

    3.获取 get 传值

       constructor(private route: ActivatedRoute) {
         console.log(this.route.queryParams);
    }
  • 相关阅读:
    softice 在winice中的安装 zt
    普通版和优秀版简历的20项对比
    今天又投了几家。。等啊。。。
    乱写
    反攻击技术综合分析报告
    今天投简历的公司
    #pragma 预处理指令详解
    黑客入侵无线网络常用手段
    ADODB.Stream漏洞
    利用TCP/IP的堆栈指纹的方法
  • 原文地址:https://www.cnblogs.com/loaderman/p/10912198.html
Copyright © 2011-2022 走看看