Question

我有一个Ionic3 / Angular4应用程序，数据来源取决于当前记录的用户，因此我必须等待用户数据事件被触发以设置数据连接。（我使用firebase来管理用户身份验证）。

在主要组件中我有这个：

  async ngOnInit() {
    this.afAuth.authState.subscribe(async data => {
      if (data && !data.isAnonymous) {    
        await this.userService.initSettingsAsync(data.uid);
      }
      else {
        this.nav.setRoot('LoginPage');
      }
    });
  }

我的页面是这样的：

@IonicPage({
  segment: 'customers/:customerId',
  defaultHistory: ['CustomersPage'],
})
@Component({
  selector: 'page-customer-detail',
  templateUrl: 'customer-detail.html',
})
export class CustomerDetailPage {
  customerId: string;
  customer: Customer;

  constructor(public navParams: NavParams, private customerService: CustomerService) {
    this.customerId = navParams.get("customerId");
  }

  async ionViewDidLoad() {
    console.log('ionViewDidLoad CustomerDetailPage');
    this.customer = await this.customerService.get(this.customerId);
  }
}

this.customerService.get(this.customerId)必须执行AFTER this.userService.initSettingsAsync(data.uid) promise才能解决，否则userService不知道从哪里获取数据。

当页面由deeplink加载时，它会在authState事件触发之前初始化。

我如何以聪明的方式处理这个问题？我的意思是，我不喜欢将用户的东西放在每个需要数据的页面上。

Answer 1

初始化完成后添加离子导航就足够了。超级简单;）希望这有帮助。

app.html：

<ion-nav *ngIf="initialized" [root]="rootPage" #content></ion-nav>

app.component.ts：

  async ngOnInit() {
    this.afAuth.authState.subscribe(async data => {
      if (data && !data.isAnonymous) {    
        await this.userService.initSettingsAsync(data.uid);
        this.initialized = true;
      }
      else {
        this.initialized = true;
        setTimeout(() => this.openPage('LoginPage'));
      }
    });
  }

因为初始化后会在视图中添加'nav'，所以需要一些技巧（Angular 2 @ViewChild in *ngIf）：

  private nav: Nav;
  @ViewChild(Nav) set contnav(nav: Nav) {
    this.nav = nav;
  }

在加载ionic3深度链接页面之前等待事件

1 个答案: