路由问题

Question

我正在使用延迟加载。当我的应用程序初始化时，我将重定向到main / home。我试图添加一个页面以将新用户重定向到，然后再将其重定向到主页/主页。我使用了一个简单的按钮来测试导航，但它始终将我导航回主页/主页。

我的主要问题只是导航部分

您能告诉我我在做什么错吗？我正在使用 Angular 8 和 Ionic 4

app-routing.module.ts

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule' },
'./pages/search/search.module#SearchPageModule' },

{ path: 'cat-view', loadChildren: './pages/cat-view/cat- 
view.module#CatViewPageModule' },

{ path: 'country-selection', loadChildren: './pages/country-s 
 election/country-selection.module#CountrySelectionPageModule' },
  ];

主模块

 const routes: Routes = [
 {
   path: 'main',
   component: MainPage,
   children: [
     { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
     { path: 'favorites', loadChildren: 
   '../favorites/favorites.module#FavoritesPageModule' },
   ]
   },
   {
   path: '',
   redirectTo: '/main/home'
    }
  ];

app.component.ts

 initializeApp() {
     this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.notificationSetup();
        this.navigateToNextPage();
     });
 }
 navigateToNextPage() {
    this.router.navigate(['/country-selection']);
  }

Answer 1

不清楚是要解决一些测试代码还是要实现新的用户入门体验。

路由问题

对于您的路线，我认为您已经定义了两次路线，并在第二条路线中将其覆盖。 “主模块”是什么意思？

用户入门教程

制作新用户教程的方法是使用身份验证保护并将令牌保存在Ionic Storage中。

这里有一个很棒的教程，可以指导用户仅在第一次加载时进行介绍性幻灯片演示：

Ionic Intro Slider for New Users | AngularFirebase

基本上，它是创建警卫队：

// ...omitted
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class TutorialGuard implements CanActivate {

  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {

    const isComplete = await this.storage.get('tutorialComplete');

    if (!isComplete) {
      this.router.navigateByUrl('/tutorial');
    }

    return isComplete;
  }
}

然后在幻灯片的最后一页上，将其设置为下次不再显示：

await this.storage.set('tutorialComplete', true);

Answer 2

我实际上只需删除

就解决了这个问题

 { path: 'country-selection', loadChildren: './pages/country- 
 selection/country-selection.module#CountrySelectionPageModule' },

来自 app-routing-module.ts ，并将其添加到 main.module.ts 然后以这种方式调用

 this.router.navigateByUrl('main/country-selection');

路由器导航无法正常运行

2 个答案:

路由问题

用户入门教程