How to nav set Root inside a constructor

Hi, I am creating a login page that if the user login before. It will directly redirect to user detail page.
But the code like the following is not work.

  constructor(private nav: NavController,private global :Global) {    
        this.local = new Storage(LocalStorage);
        this.currentUser = this.local.get('userid');
        this.local.get('userid').then((value) => {
              var dt = value
              console.log("Local Storage value:", dt)
              if(dt !=null)
              this.nav.setRoot(UserdetailPage)
          })

      }

it is work if you normally login, it will direct to user detail page.

  loginSucessAlert(){
    this.currentUser = Parse.User.current().id;
    this.local.set('userid',this.currentUser);
    this.global.setUserId(Parse.User.current().id); 
    this.global.setUserName(this.username);
      let alert = Alert.create({
        title:'Login',
        subTitle:'Hi '+this.username+', Press to Continue.',
        buttons: [{
            text: 'Ok',
            handler: () => {
              // user has clicked the alert button
              // begin the alert's dimiss transition
              let navTransition = alert.dismiss();
                navTransition.then(() => {
                  // here comes your navigation action (push, pop, setRoot)
                  this.nav.setRoot(UserdetailPage);
                });
              return false;
            }
          }]
      });
      this.nav.present(alert);
  }

The error log is :

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property ‘id’ of null
ORIGINAL STACKTRACE:
TypeError: Cannot read property ‘id’ of null
at new UserdetailPage (http://localhost:8100/build/js/app.bundle.js:398:43)
at DebugAppView._View_UserdetailPage_Host0.createInternal (UserdetailPage_Host.template.js:15:30)
at DebugAppView.AppView.create (http://localhost:8100/build/js/app.bundle.js:30084:21)
at DebugAppView.create (http://localhost:8100/build/js/app.bundle.js:30296:44)
at ComponentFactory.create (http://localhost:8100/build/js/app.bundle.js:29313:36)
at http://localhost:8100/build/js/app.bundle.js:75764:49
at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:35538:41)
at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
at Zone.run (http://localhost:8100/build/js/zone.js:216:44)
ERROR CONTEXT:
[object Object]

Unhandled Promise rejection: EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property ‘id’ of null
ORIGINAL STACKTRACE:
TypeError: Cannot read property ‘id’ of null
at new UserdetailPage (http://localhost:8100/build/js/app.bundle.js:398:43)
at DebugAppView._View_UserdetailPage_Host0.createInternal (UserdetailPage_Host.template.js:15:30)
at DebugAppView.AppView.create (http://localhost:8100/build/js/app.bundle.js:30084:21)
at DebugAppView.create (http://localhost:8100/build/js/app.bundle.js:30296:44)
at ComponentFactory.create (http://localhost:8100/build/js/app.bundle.js:29313:36)
at http://localhost:8100/build/js/app.bundle.js:75764:49
at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:35538:41)
at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
at Zone.run (http://localhost:8100/build/js/zone.js:216:44)
ERROR CONTEXT:
[object Object] ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: “Error in :0:0”, _originalException: TypeError: Cannot read property ‘id’ of null
at new UserdetailPage (http://localhost:8100/build/…, _originalStack: “TypeError: Cannot read property ‘id’ of null↵ a…n (http://localhost:8100/build/js/zone.js:216:44)”, _context: DebugContext, _wrapperStack: “Error: Error in :0:0↵ at ViewWrappedException.W…n (http://localhost:8100/build/js/zone.js:216:44)”}

Error: Uncaught (in promise): EXCEPTION: Error in :0:0(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

If you are referencing an object in a template whose value will eventually be set by an asynchronous operation (as it looks like you are doing), you have a few options: initialize it before starting the asynchronous operation with a valid dummy, guard all access to it in the template with checks for null, the Elvis operator, or the AsyncPipe, or ensure using ngIf that it never gets instantiated until the value is available.

Just have a try with simply press button to set root, it doesn’t work too.
Right now, my set root function only work in the above alert function.

<div padding>
    <button primary block (click)="go()">GO</button>
  </div>

  go(){
    this.nav.setRoot(UserdetailPage);
  }

why not just use this.nav.push(UserDetailPage), rootPage is the starting page of the app, there is just one starting page and one starting moment - if I said that correctly. Meaning rootPage is supposed to be determined in app.ts not any other sub-compoennts.

Thanks, problem solved