关于angular:记录一下遇到的问题

35次阅读

共计 3315 个字符，预计需要花费 9 分钟才能阅读完成。

这个时候是在 ng s 下启的环境，始终报这个错。过后想到的是 app.module.ts 那里没有引入 ionicModule, 然而回去一看曾经引入了

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

而后就始终 google，发现跟我雷同的经验

他报错的起因是遗记在 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 环境下的时候，路由不能失常跳转，点击告诉布告和志愿者的时候，页面始终刷新到本页面，不能失常跳转到相应页面。

起初才明确不应该这么写。
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),
  }

第二次谬误解决。

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

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

写了该段路由之后控制台就报错。而后同样是曾经引入了 IonicModule 然而辨认不到。这次曾经 declaration, 所以和问题一的解决办法不一样。

declarations: [SignUpComponent],

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

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

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

同时我发现一个问题，单纯的在上部 import 而不在 ngModule 中应用，也能发挥作用

猜想可能是因为 import 了就代表着加载本模块的时候会同时加载这些须要的模块。

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

在设计返回键须要返回上一页的路由。用到了这两种办法，一种是依据绝对路径跳转，一种是依据相对路径跳转。

navigateByUrl：绝对路径跳转

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

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<boolean>;

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();

在测试的时候打印发现 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，也就阐明，路由变动的时候并没有增加到数组中。
最初还没分明是什么起因。

总结：这周写路由遇到了很多问题，也了解了很多常识，比方惰性加载，根路由和子路由关系等，学长也帮忙了我很多，在此感激。

正文完