Question

我在标签页上有一个按钮，可通过删除存储条目为用户重置应用程序：

export class Tab1Page {

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

  async resetSettings() {
    await this.storage.remove('welcomeComplete');

    const toast = await this.toastController.create({
      message: 'Your settings have been reset.',
      duration: 2000
    });
    await toast.present();

    console.log('before');
    this.router.navigateByUrl('/');
    console.log('after');
  }
}

在浏览器调试器中，我可以看到该条目已从存储中删除。我也被敬酒。

但是，由于某种原因，navigableByUrl方法似乎没有触发。以上页面位于网址“ / tabs / tab1”。这两个console.log（）语句均已执行，并且控制台中没有错误。

我对前端开发还很陌生，所以如果这是一个基本的新手问题，我们深表歉意。

更新

我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { WelcomeGuard } from './welcome/welcome.guard';

const routes: Routes = [
  { 
    path: '', 
    loadChildren: './tabs/tabs.module#TabsPageModule',
    canActivate: [WelcomeGuard]
  },
  { 
    path: 'welcome', 
    loadChildren: './welcome/welcome.module#WelcomePageModule',
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { enableTracing: true, preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我的welcome.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';
import { Storage } from '@ionic/storage';

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

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

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

    const welcomeComplete = await this.storage.get('welcomeComplete');

    if (!welcomeComplete) {
      this.router.navigateByUrl('/welcome');
    }
    return true;
  }
}

我将我的resetSettings（）更改为以下内容：

  async resetSettings() {
    await this.storage.remove('welcomeComplete');

    const toast = await this.toastController.create({
      message: 'Your settings have been reset.',
      duration: 2000
    });

    toast.onDidDismiss().then(() => {
      this.router.navigateByUrl('');
    });

    await toast.present();
  }

更改resetSettings（）不能解决问题。

Answer 1

您的警卫有问题，在 welcome.guard.ts 中进行以下更改可以提供帮助

 if (!welcomeComplete) {
   this.router.navigateByUrl('/welcome');
   return false;
 }
 return true;

原因：

调用后

在resetSetting函数中

toast.onDidDismiss().then(() => {
  this.router.navigateByUrl('');
});

它尝试导航到url：”，它与路由数组中的第一个对象

匹配

...
{ 
path: '', 
loadChildren: './tabs/tabs.module#TabsPageModule',
canActivate: [WelcomeGuard]
}
....

然后执行保护功能，然后在任何情况下都返回 true ，这意味着页面已被批准导航至'/'，并且您位于/ tabs / tab1中，这是当前路线设置，因此它不执行任何操作并停留在同一页面上。

Answer 2

和其他人一样，我会检查您尝试导航的路由以匹配您的路由器路径配置：

this.router.navigateByUrl('/');

const routes: Routes = [
    {
        path: '/', component: YourComponent, pathMatch: 'full', data: {
        ...
        }
    },

我的默认路由通常是''，而不是'/'。

它们在这里很好地介绍了使用router.navigate / router.navigateByUrl的方法： How to use router.navigateByUrl and router.navigate in Angular

如果您包括其余的相关代码，我们也许可以为您解决特定问题提供更多帮助。

Answer 3

我希望这对您有帮助

确保您的服务方法返回可观察的结果。

storage.service.ts

import { Observable } from 'rxjs';

remove() {

  const obs = Observable.create(observer => {
    observer.next('Hello');

    // Throw an error.
    if (error) {
      observer.error("my error");
    }

  });

  return obs;

}

toastController.service.ts

import { Observable } from 'rxjs';

create() {

  const obs = Observable.create(observer => {
    observer.next('Hello');

    // Throw an error.
    if (error) {
      observer.error("my error");
    }

  });

  return obs;

}

然后消费

import { zip } from 'rxjs';


export class Tab1Page {

  constructor(
    private router: Router, 
    private storage: Storage, 
    private toastController: ToastController
  ) { 
    // this.resetSettings();
  }

  resetSettings() {
    const a = this.storage.remove('welcomeComplete');
    const b = this.toastController.create({
      message: 'Your settings have been reset.',
      duration: 2000
    });

    zip(a, b).subscribe( res => {
       this.router.navigateByUrl('/');
       // or
       this.router.navigate(['/']);
    });

  }
}

Answer 4

router.navigatByUrl返回带有布尔值的诺言，表示天气路由成功。我建议登录，这样您的路由成功即可：

this.router.navigateByUrl('/').then(success => console.log(`routing status: ${success}`);

由于您的警惕，我猜测结果将是错误的。因此，如果我是对的，请通过从您的路线中将其删除或返回true来禁用WelcomeGuard。

我认为问题是由于再次在保护程序内部进行路由，但稍后又返回了两行；

Answer 5

尝试这可能有效，在等待toast.present（）;

之前添加它

  toast.onDidDismiss().then(()=> {
    this.router.navigateByUrl('/');
  });

Answer 6

您应该尝试使用导航而不是navigationByUrl

this.router.navigate(['/']);

或

this.router.navigate(['']);

还可以

toast.onDidDismiss().then(()=> {
  this.router.navigate(['/']);
});

取决于您的路由器。

navigationByUrl无法路由应用程序

6 个答案:

storage.service.ts

toastController.service.ts

然后消费