继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

angular路由传参,这两种方式不得不看!

幕布斯7119047
关注TA
已关注
手记 432
粉丝 28
获赞 99

    前面给大家介绍了angular路由跳转,这次说一说angular路由传参,两种具体如下:

1,查询方式传参

<a href="" routerLink="/about" [queryParams]='{"nihao":"d dod f"}'>关于我们</a>


import { Component, OnInit } from '@angular/core';

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

@Component({

  selector: 'app-about',

  templateUrl: './about.component.html',

  styleUrls: ['./about.component.css']

})

export class AboutComponent implements OnInit {


  constructor(private route:ActivatedRoute) { }


  ngOnInit(): void {

    debugger

    this.route.queryParamMap.subscribe(function(query){

      debugger

      console.log(query)

      console.log(query.get("nihao"))

      

    })

  }


}


2,动态方式传参

import { NgModule } from '@angular/core';

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

import { AboutComponent } from './page/about/about.component';

import { HomeComponent } from './page/home/home.component';


const routes: Routes = [

  { path: 'home/:name/:age', component: HomeComponent },

  { path: 'about', component: AboutComponent },

  //pathMatch表示完全匹配,其中

  { path: '', redirectTo:"/about",pathMatch:"full" },

];


@NgModule({

  //RouterModule.forRoot()启动路由

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}


<a href="" [routerLink]="['/home','zhangdan']">首页</a> &ngsp;

    以上便是关于angular路由传参的两种方法,更多内容干货可关注慕课网~

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP