routerExtensions.navigate 在此 NativeScript 应用程序上无法正常运行

Question

我有一个基于示例代码的非常基本的NativeScript / Angular 项目：

https://github.com/alexziskind1/nativescript-oauth2/tree/master/demo-angular

它基本上允许用户使用Google登录。

在用户介绍他的凭据后，用户被重定向回应用程序，它应该被重定向到路由：/authenticated。

我的问题是，在文件 login.component.ts 上，当调用 this.routerExtensions.navigate(["/authenticated"]) 方法时，在某些情况下，用户会被转发到该路由，有时不会。我试图调查一下情况是什么，但它看起来很随机。

另一方面，我不得不说我总是在控制台上获取访问令牌。所以authService 工作正常，但不能正常工作的是导航。

另外，我不知道我是否必须使用：

this.routerExtensions.navigate(["/authenticated"])

或

this.routerExtensions.navigate(["../authenticated"])

在官方网站的示例代码中，您可以在此处看到两个点（第二种情况）：

https://github.com/alexziskind1/nativescript-oauth2/blob/master/demo-angular/src/app/login/login.component.ts#L23

但这似乎不是问题。

我想我在这里省略了一些东西。

下面是我的一些代码片段。

知道如何解决这种情况吗？

谢谢！

app.component.html

<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
<page-router-outlet></page-router-outlet>

app-routing.module.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { LoginComponent } from "./screens/login/login.component";
import { AuthenticatedComponent } from "./screens/authenticated/authenticated.component";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";

const routes: Routes = [
    { path: "", redirectTo: "/login", pathMatch: "full" },
    { path: "login", component: LoginComponent },
    { path: "authenticated", component: AuthenticatedComponent },
    { path: "items", component: ItemsComponent },
    { path: "item/:id", component: ItemDetailComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

login.component.html

<ActionBar title="My App" class="action-bar"></ActionBar>

<StackLayout class="form">

    <Button text="Login Social Network" (tap)="onTapLogin()" class="btn btn-primary btn-active"></Button>

</StackLayout>

login.component.ts

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular";
import { ITnsOAuthTokenResult } from "nativescript-oauth2";
import { Page } from "tns-core-modules/ui/page/page";
import { AuthService } from "../../services/auth.service";

@Component({
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"],
})
export class LoginComponent implements OnInit {

    constructor(private page: Page, private authService: AuthService, private routerExtensions: RouterExtensions) {
    page.actionBarHidden = true;
    }

    ngOnInit(): void {

    }

    public onTapLogin() {
        this.authService
            .tnsOauthLogin("google")
            .then((result: ITnsOAuthTokenResult) => {
                console.log("back to login component with token " + result.accessToken);
                this.routerExtensions
                    .navigate(["/authenticated"])
                    .then(() => console.log("navigated to /authenticated"))
                    .catch(err => console.log("error navigating to /authenticated: " + err));
            })
            .catch(e => console.log("Error: " + e));
    }

}

auth.service.ts

import { Injectable } from "@angular/core";

import {
  TnsOAuthClient,
  ITnsOAuthTokenResult
} from "nativescript-oauth2";

@Injectable()
export class AuthService {
  private client: TnsOAuthClient = null;

  constructor() { }

  public tnsOauthLogin(providerType): Promise<ITnsOAuthTokenResult> {

    this.client = new TnsOAuthClient(providerType);

    return new Promise<ITnsOAuthTokenResult>((resolve, reject) => {
      this.client.loginWithCompletion(
        (tokenResult: ITnsOAuthTokenResult, error) => {
          if (error) {
            console.error("back to main page with error: ");
            console.error(error);
            reject(error);
          } else {
            console.log("back to main page with access token: ");
            console.log(tokenResult);
            resolve(tokenResult);
          }
        }
      );
    });

  }

  public tnsOauthLogout() {
    if (this.client) {
      this.client.logout();
    }
  }
}

Answer 1

在你的情况下，我认为直接导航到 authenticated 是正确的

this.routerExtension.navigate('authenticated'], {
    clearHistory: true
});

并在成功登录后清除历史记录。

如果您愿意，也可以尝试this.routerExtension.navigateByUrl('/authenticated')。

无论如何，您都可以在 app-routing 模块中快速添加一些有用的跟踪：

NativeScriptRouterModule.forRoot(routes, {
    enableTracing: true
})

最后，有时在导航前添加超时会有所帮助，例如：

public onTapLogin() {
        this.authService
            .tnsOauthLogin("google")
            .then((result: ITnsOAuthTokenResult) => {
                console.log("back to login component with token " + result.accessToken);
                setTimeout( () => {
                    this.routerExtensions
                        .navigate(["/authenticated"])
                        .then(() => console.log("navigated to /authenticated"))
                        .catch(err => console.log("error navigating to /authenticated: " + err));
                }, 300);
            })
            .catch(e => console.log("Error: " + e));
    }

但这通常只在我打开模式导航时才需要。

编辑：所以，在 Google 签名对我来说很好之后，我尝试了你的示例项目和导航。由于您随机收到错误，我想这可能只是一个 UI 时间问题，我最后建议使用 setTimeout 将是正确的解决方法。

Answer 2

我在使用 Android 模拟器时遇到了这个问题，我更新了 nativescript 并更改了模拟器中使用的设备，它已修复。 所以尝试更新和一些更改希望它有效