Java教程

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

本文主要是介绍angular路由传参,这两种方式不得不看!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

    前面给大家介绍了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路由传参的两种方法,更多内容干货可关注慕课网~

这篇关于angular路由传参,这两种方式不得不看!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!