记录一下本周遇到的问题

问题一:ionic标签识别不到

记录一下本周遇到的问题_第1张图片

这个时候是在ng s下启的环境,一直报这个错。当时想到的是app.module.ts那里没有引入ionicModule,但是回去一看已经引入了

 imports: [
    BrowserModule,
    AppRoutingModule,
    IndexModule,
    IonicModule.forRoot()
  ],

然后就一直google,发现跟我相同的经历记录一下本周遇到的问题_第2张图片

他报错的原因是忘记在app.module.ts declaration AppComponent,然后我看了果真如此

@NgModule({
  declarations: [
  ],

因为以前都是都是写好的,也没想到问题竟然出在这里。

问题二:页面不跳转

在app-routing-module.ts写路由的时候遇到的问题
这是web端的根路由,当时也没有仔细想,就仿照着写了小程序端的路由

{
    path: '',
    component: BasicComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
      },
      {
        path: 'party-building',
        loadChildren: () => import('./party-building/party-building.module').then(m => m.PartyBuildingModule),
        data: {
          title: '党建管理'
        }
      },

写法如下:

 {
    path: '',
    component: IndexComponent,
    data: {
      title: ''
    },
    children: [
      {
        path: 'notice',
        loadChildren: () => import('./notice/notice.module').then(m => m.NoticeModule),
      },
      {
        path: 'volunteer',
        loadChildren: () => import('./volunteer/volunteer.module').then(m => m.VolunteerModule),
      }
    ]
  }

接着测试的时候,虽然控制台没有报错,但是ng s环境下的时候,路由不能正常跳转,点击通知公告和志愿者的时候,页面一直刷新到本页面,不能正常跳转到相应页面。
记录一下本周遇到的问题_第3张图片
后来才明白不应该这么写。
1.web的路由BasicComponent是父组件,包括菜单导航,头部主题等,每个子页面都需要显示父组件的内容。
2而如果在微信小程序端这么使用的话,由于IndexComponent是父页面每个子路需要显示父页面的内容,所以即使点击了志愿者,路由也已经跳转到http://localhost:4200/volunteer
但是需要先显示父组件的IndexComponent内容,所以会覆盖掉子页面的内容,所以一直显示的是主页面的内容。

所以这几个路由应该是平级的关系

修改为平级关系后应该这么写:

{
    path: '',
    component: IndexComponent,
    data: {
      title: ''
    }
  },
  {
    path: 'notice',
    loadChildren: () => import('./notice/notice.module').then(m => m.NoticeModule),
  },
  {
    path: 'volunteer',
    loadChildren: () => import('./volunteer/volunteer.module').then(m => m.VolunteerModule),
  }

第二次错误解决。

问题三:同样是ionic标签识别不了的问题

在volunteer-routing-module.ts遇到的问题.()
路由是这么写的

const routes: Routes = [
  {
    path: '',
    component: VolunteerIndexComponent
  },
  {
    path: 'detail/:id',
    component: ActivityDetailsComponent,
  },

image.png

写了该段路由之后控制台就报错。然后同样是已经引入了IonicModule但是识别不到。这次已经declaration,所以和问题一的解决方法不一样。

declarations: [
    SignUpComponent
  ],

然后去google发现可能是因为没有import子模块的问题。
image.png

引入子模块问题就解决了。
在volunteer.module.ts中:

imports: [
    CommonModule,
    VolunteerIndexModule,    <- 相应的子模块
  ]

同时我发现一个问题,单纯的在上部import而不在ngModule中使用,也能发挥作用
记录一下本周遇到的问题_第4张图片
猜测可能是因为import了就代表着加载本模块的时候会同时加载这些需要的模块。

总结:发生这些错误的时候就下意识地想着,是IonicModule未引入导致的,也没有想到没有引入子模块会发生这些错误。

navigateByUrl与navigate

在设计返回键需要返回上一页的路由。用到了这两种方法,一种是根据绝对路径跳转,一种是根据相对路径跳转。

navigateByUrl:绝对路径跳转

navigateByUrl(url: string | UrlTree, extras?: NavigationBehaviorOptions): Promise;

url – An absolute path for a defined route. The function does not apply any delta to the current URL.
extras – An object containing properties that modify the navigation strategy.
用法:

 this.router.navigateByUrl('volunteer').then();

navigate:相对路径跳转

navigate(commands: any[], extras?: NavigationExtras): Promise;

commands – The fragments are applied to the current URL or the one provided in the relativeTo property of the options object, if supplied.
extras – An options object that determines how the URL should be constructed or interpreted.

用法:

// 返回上一个路由
this.router.navigate([`../`], {    
        relativeTo: this.route}).then();

目前项目中封装好了回退路由函数,可以直接使用,但是使用的时候没有反应。点击返回按钮,没有任何反应
用法:this.commonService.back();
记录一下本周遇到的问题_第5张图片
在测试的时候打印发现 this.routeStates.length 为0

/** 所有路由信息 */
  public routeStates: Array<{url: string, state: {[k: string]: any} | undefined}> = [];

查看了commonService中的源代码,发现在路由改变的时候会将当前路由添加到routeStates数组中

 /** 如果不是认证模块,将当前路由添加到数组中 */
          if (this.routeStates.length >= 50) {
            this.routeStates.splice(0, 1);
          }
          this.routeStates.push({url: this.currentUrl, state: this.router.getCurrentNavigation()?.extras.state});
        }

但是现在该数组长度为0,也就说明,路由变化的时候并没有添加到数组中。
最后还没清楚是什么原因。

总结:这周写路由遇到了很多问题,也理解了很多知识,比如惰性加载,根路由和子路由关系等,学长也帮助了我很多,在此感谢。

你可能感兴趣的