Question

如何在角度4中配置ui-router以使用来自不同模块的组件？当我尝试使用uiSref指令从其他模块更改状态时，uiRouter不会做出反应。

{
    name: 'app',
    abstract: true,
},
{
    name: 'app.login',
    url: '/login',
    views: {
        '@': LoginComponent
    }
}, {
    name: 'app.dashboard',
    url: '/dashboard',
    views: {
        '@': DashboardComponent
    }
}

Answer 1

如果您不使用命名视图的功能，则应直接引用该组件，例如：

{
    name: 'app.login',
    url: '/login',
    component: LoginComponent
},

UI-Router示例应用程序中的另一个示例：https://github.com/ui-router/sample-app-angular/blob/master/src/app/contacts/contacts.states.ts

这会将LoginComponent放入父状态（在此示例中名为“ app”）定义的组件的第一个ui-view元素中。

此状态定义应在您的功能模块定义中，作为forChild（）方法的参数。

@NgModule({
  imports: [
    UIRouterModule.forChild({ states: FEATURE_MODULE_STATES }),
    ...
  ],
...
})

也可以在UI-Router示例应用程序中看到：https://github.com/ui-router/sample-app-angular/blob/master/src/app/contacts/contacts.module.ts

Answer 2

您当前的以下行仅说明了如何在导航到浏览器的地址栏时显示所有内容。

url: '/dashboard',

需要添加以下行

templateUrl: 'folder/file.html'

它也应该是这样的：

 $stateProvider
    .state('stateName', {
        url: '/file', <!-- Optional, "file" can be anything -->
        templateUrl: 'folder/file.html',
        controller: 'stateController' <!-- Optional -->
    })

然后链接将被触发：

 <a ui-sref="stateName">ClickToGetTostateName</a>

Angular2，如何：从多个模块配置ui-router

2 个答案: