发表于: 2020-06-08 23:36:29

1 2440


今天

根据昨天学的路由传参,使用routerLink的地方使用[queryparams],此处可以设置动态的传参,

目前的问题是如何设置默认路由路径?看了下萝卜多的网页

目前不清楚的地方是怎么设置默认路由路径?初始传参?怎么做到的?

昨天学了下如何创建新的子模块,以为要在新的模块里写一个路由文件,当访问时默认path为  list/1什么的,想了下路由文件的配置也是需要一个组件进行配置,想来不是这么做了。

按照get方法传值,应该是在分页器的回调函数获取该值?同时绑定到路由上。获取值的话可以直接使用请求参数 listmodul 对象数组里面的page,和size进行绑定,但是如何在ts文件里绑定路由?

搜索到的get传值方法,使用NavigationExtras模块然后定义传参,

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

但是这个是在一个方法里,也就是我需要在home页面配置好该方法,绑定到点击事件里,

尝试按照教程写

结果是没有跳转。尝试了修改好几次都没能跳转。。不知道哪出问题。

写了好几种,甚至使用了click方法都没有跳转。因为这个跳转是整页跳转?写在侧边栏没生效报错。或者是该list是home的子级原因?应该是了。

想不通。

学习一个重载路由在跟路由文件配置添加

在使用到的路由上 添加

按理说配置到这里就可以了,但是url还是没有变化。。。写了自定义后缀还是报错

尝试其他方法:还是报错。

尝试在分页器的回调函数添加,依然是报错。

再回去看了下萝卜多,跳转至

感觉是我的路由层级有问题?

打印router看了下

url树的queryParams为空值。

在list前面添加一个home表示层级就显示了

this.router.navigate(['home/list'], {
      queryParams: { page: this.listModul.page },
    });

然后在分页器的变更回调函数添加就可以了。

但是还有个问题就是刷新的时候,因为设置了初始函数读取默认请求参数,导致不管选到第几页,刷新变回第一页,尝试去掉page,为空值,去掉size,为空值,直接加载不出来。

根据师兄的说法是,在url读取值,这样就记录了当前所在状态。应该是根据获取url值进行一个if判断,若url获取的值page不等于1,或者其他任何参数不为默认值,则读取url参数进行取值,以此来保持该页面

尝试了一下,是成功的,可以确保停留在该页面的url,但是内容并没有停留在该页。重新加入一个赋值,使请求参数等于url参数:

结果是页面成功停留在该页,但是又有一个新的问题,当点击页码切换其他页面时,url卡在了之前停留的地方,不会变化了。。

尝试打印该listmodul.page,也就是请求参数,

请求参数是有变更的,也就是我的逻辑写错了。

重新优化一下逻辑,想半天,把初始函数的获取参数给去掉了,直接写进这个判断函数里,成功获取并且在url变更的时候刷新保持页面不变。

逻辑修正好了,但是搜索按钮的方法又出现问题了。。一旦搜索指定条件,articlelist数据变成空值,但是total显示是正确的

想了一下,应该是page=8的原因,当搜索时应该清除url的page为0.

尝试改为1,依然是报错状态,无法获取数据进行渲染。。

明天

继续研究逻辑哪出现问题


返回列表 返回列表
评论

    分享到