Question

如何在角度2中使用$ state.go（）。我想根据某些事件更改状态，我试图在plnk中执行此操作。这是{{3}这根本不起作用。

代码：

/** imports */

    import {NgModule, Component} from '@angular/core';
    import {UIRouterModule ,   Transition } from "ui-router-ng2";
    import {BrowserModule} from "@angular/platform-browser";
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

    /** Components */

    @Component({
      selector: 'my-app',
      template: `
      <a uiSref="hello" uiSrefActive="active">Hello</a>
      <a (click)=hello() uiSrefActive="active">About</a>

      <ui-view></ui-view>
      `
    })
    export class App { 
      constructor(trans: Transition) { 
        //this.$state = trans.router.stateService;
      }

      hello(){
        console.log("hello clicked");
        //this.$state.go('about');

      }
    }

    @Component({  
      template: '<h3>Hello world!</h3>' 
    })
    class Hello { }

    @Component({ 
      template: '<h3>Its the UI-Router hello world app!</h3>' 
    })
    class About { }


    /** States */

    let helloState = { name: 'hello', url: '/hello',  component: Hello }; 
    let aboutState = { name: 'about', url: '/about',  component: About };

    /** Root Application NgModule */

    @NgModule({
      imports: [ 
        BrowserModule,
        UIRouterModule.forRoot({ states: [ helloState, aboutState ], useHash: true }),

      ],
      declarations: [ App, Hello, About ],
      bootstrap: [ App ]
    })
    class RootAppModule {}

    /** Angular 2 bootstrap */

    platformBrowserDynamic().bootstrapModule(RootAppModule);

我希望当用户成功登录成功后我想改变状态。我使用$ state.go（）在Angular 1.6中进行。我无法通过角度2和Ui路由器找到相同的结果。

Answer 1

检查更改

/ **进口* /

    import {NgModule, Component} from '@angular/core';
    **import { TargetState, StateService } from 'ui-router-core';**
    import {BrowserModule} from "@angular/platform-browser";
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

    /** Components */

    @Component({
      selector: 'my-app',
      template: `
      <a uiSref="hello" uiSrefActive="active">Hello</a>
      <a (click)=hello() uiSrefActive="active">About</a>

      <ui-view></ui-view>
      `
    })
    export class App { 
      constructor(**private $state: StateService**) { 

      }

      hello(){
        console.log("hello clicked");
        this.$state.go('about');

      }
    }

    @Component({  
      template: '<h3>Hello world!</h3>' 
    })
    class Hello { }

    @Component({ 
      template: '<h3>Its the UI-Router hello world app!</h3>' 
    })
    class About { }


    /** States */

    let helloState = { name: 'hello', url: '/hello',  component: Hello }; 
    let aboutState = { name: 'about', url: '/about',  component: About };

    /** Root Application NgModule */

    @NgModule({
      imports: [ 
        BrowserModule,
        UIRouterModule.forRoot({ states: [ helloState, aboutState ], useHash: true }),

      ],
      declarations: [ App, Hello, About ],
      bootstrap: [ App ]
    })
    class RootAppModule {}

    /** Angular 2 bootstrap */

    platformBrowserDynamic().bootstrapModule(RootAppModule);

Answer 2

像这样在应用程序中导入路由器

    import { TargetState, StateService } from 'ui-router-core';

在构造函数中使用状态服务，如下面的代码：

constructor(appConfig: AppConfigService,
              private authService: AuthService,
              private $state: StateService
  )

this.$state.go(state, params, options)

使用ui-router-ng2在Angular 2中不使用ui-sref更改状态。（Angular2＆amp; UI-Router-ng2）

2 个答案: