Angular路由传值的四种方式有大用

星期三, 2022-11-02 07:02 — adminshiping1

开始正片吧，例如现在我们有两个组件，一个是新闻列表list.component；另一个是新闻新闻详情detail.component。根据组件的功能我们应该是从新闻列表页面进入详情页面，根据列表中条目的文章ID请求数据调用详细的文章信息然后展示给用户查看。我们如何在列表页把文章ID传给详情页呢？

共有四种方式。确切说是分成两大类共四小类，我给大类定义的名字是主动跳转传值和触发跳转传值，两种方式都包含有get跳转和动态路由两种方式来实现，这样也就就是四种了下面一一道来：

前提是我们在app-routing.module.ts中已经添加了相关的路由条目，嗯！我们先不考虑RouterModule.forRoot()和RouterModule.forChild()的区别和应用场景，为了方便理解记忆路由传值，在这里这里面我们把所有的路由信息都写到了app-routing.module.ts中

// 导入路由模块及组件信息
import { Routes ,  RouterModule } from '@angular/router';
import { ListComponent } from '....';
import { DetailComponent } from '....';

// 定义路由信息
const routes: Routes = [
  {path: 'list', component: ListComponent},
  {path: 'detail', component: DetailComponent},
  {path: '**', redirectTo: 'home'},
];

// 应用路由
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

一，主动跳转传值

1：Get方式

newslist.component.html中使用ngfor调用列表，使用routerLink属性来定义跳转路由地址，使用queryParams属性来定义要传递的值。注意值的形式，别搞错了。不管是字符串还是变量都要有" "来包裹，而字符串还要再多一层' '

<!--  newslist.component.html  -->
<ul class="list">
    <li *ngFor="let item of items">
        <!--   使用queryParams属性来传递值  -->
        <a [routerLink]="['/detail']" [queryParams]="{ id:item.ID }">{{item.title}}</a>
    </li>
</ul>

detail.component中使用ActivatedRoute模块的queryParams方法来接受传递过来的数据，需要注意的queryParams是一个RXJS对象需要用subscribe订阅来调用返回值。

/* detail.component.ts
 要先导入ActiveRoute模块 */
import { ActivatedRoute } from "@angular/router"

// 构造函数中实例化
constructor( public route:ActivatedRoute ){ }

// 接收到传递过来的值
this.route.queryParams.subscribe( val:any => {
    console.log('文章ID：',val.id )
})

2：动态路由

部分代码已经省略，可以比较前面的代码。首先需要在路由文件中定义路由信息，这也是get方式和动态路由的区别之一，get方式不用设置路由信息，而动态路由顾名思义是需要设置路由信息的。

路由信息中添加动态路由：

// app-routing.module.ts
// 省略部分见开头的代码 注意形式是 '/:',别写错
  {path: 'detail/:id', component: ListComponent},

然后是路由跳转，不使用queryParams属性跳转，而是routerLink属性传值的时候内部的数组中，这个第二项附带上要传的值(数组下标1)。

<!--  newslist.component.html  -->
    <a [routerLink]="['/detail' , item.id]">{{item.title}}</a>

最后接受发送的数据，这里还是使用ActivatedRoute模块，但是不再使用queryParams方法，而是用params方法，而且params也是一个RXJS对象同样还是要用subscribe订阅来调用返回值。

// detail.component.ts
this.route.params.subscribe( val:any => {
    console.log('文章ID：',val )
})
//  * 注意前面传来的值是对象还是字符串

二：触发跳转传值

1：动态路由

前面所说的例子都是依附于html<a>标签，言外之意就是需要用户来点击才能触发路由跳转，如果使用场景中不需要用户点击而是根据条件判断结果自动跳转，例如判断用户是否已经登录，如果是自动登录状态就让用户自动跳转到指定页面，如果没有就自动跳转到登录页面。这个情况下使用angular的routerLink就会有点力不从心了。

这个时候我们就可以通过封装JS跳转的方法，在判断条件满足时，自动触发该方法即可。既然是触发跳转的路由跳转，那么肯定还是和我们的路由信息有关联，还是在app-routing.module.ts中添加路由信息：

// app-routing.module.ts
// 省略部分见开头的代码 注意形式是 '/:',别写错
  {path: 'detail/:id', component: ListComponent},

我们使用Router模块。注意这个地方别写错了。Routes是路由信息配置的类，ActivatedRoute模块是接受传来数据时用的模块，RouterModule是路由模块，Router模块是JS路由跳转用的模块，有点乱……没关系通过一个表格，有助于我们记忆。

“混乱的route”

// 引入Router 模块
import { Router } from '@angular/router';

使用Router的navigate方法来进行跳转，传递格式和动态路由一样。

// 构造函数中实例化
constructor(private router: Router) {}

// 带传值的JS跳转，注意传值的方式，和动态路由一样。
this.router.navigate(['/detail', item.id]);

// 没有传值的跳转
this.router.navigate(['/home']);
}
}

2：get跳转

这和get方式跳转一样，不需要路由信息的支持，直接传递就可以。不过我们需要额外引入一个NavigationExtras的类来定义传递的信息。

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

定义传参，get跳转传值：

let navigationExtras: NavigationExtras = {
    queryParams: { 'id': item.id },
    fragment: 'anchor'
};
this.router.navigate(['/detail'],navigationExtras);

后记：其实我觉得这篇文章叫路由跳转方式比较贴切，嘿嘿……

来自 http://events.jianshu.io/p/1de6d86eade5

普通分类:

angular

You are here

一，主动跳转传值

1：Get方式

2：动态路由

二：触发跳转传值

1：动态路由

2：get跳转

友情链接

搜索表单

用户登录

You are here

Angular路由传值的四种方式 有大用

一，主动跳转传值

1：Get方式

2：动态路由

二：触发跳转传值

1：动态路由

2：get跳转

友情链接

Angular路由传值的四种方式有大用