Angular中路由及其用法的示例

import { Router } from '@angular/router';
.
constructor(private router: Router) {}
.
this.router.navigate(['/newscontent'],{
  queryParams:{
    name:'laney',
    id:id
  },
  skipLocationChange: true 
  //可以不写，默认为false,设为true时路由跳转浏览器中的url会保持不变，传入的参数依然有效
});

获取参数方式

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

constructor(public route:ActivatedRoute) { }
ngOnInit() { 
    this.route.queryParams.subscribe((data)=>{
      console.log(data);
 })
}

4.2 路径传参

路径传参的url地址显示为 …/list-item/1

 {{ item.name }}
//js跳转 //router为ActivatedRoute的实例
this.router.navigate([’/list-item’, item.id]);

路径配置：

{path: ‘list-item/:id’, component: ListItemComponent}

获取参数方式

this.route.params.subscribe(
  param => {
      this.id= param['id'];
  }
)

五、父子路由

1、创建组件引入组件

import { WelcomeComponent } from ‘./components/home/welcome/welcome.component’;
 import { SettingComponent } from ‘./components/home/setting/setting.component’;

2、配置路由

{
    path:'home',
    component:HomeComponent,
    children:[{
      path:'welcome',
      component:WelcomeComponent
    },{
      path:'setting',
      component:SettingComponent
    },
    {path: '**', redirectTo: 'welcome'}
  ]
},

3、父组件中定义router-outlet

感谢你能够认真阅读完这篇文章，希望小编分享的“Angular中路由及其用法的示例”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!