问题一:ionic标签辨认不到
这个时候是在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), }
第二次谬误解决。
问题三:同样是ionic标签辨认不了的问题
在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与navigate
在设计返回键须要返回上一页的路由。用到了这两种办法,一种是依据绝对路径跳转,一种是依据相对路径跳转。
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,也就阐明,路由变动的时候并没有增加到数组中。
最初还没分明是什么起因。
总结:这周写路由遇到了很多问题,也了解了很多常识,比方惰性加载,根路由和子路由关系等,学长也帮忙了我很多,在此感激。