Angular 6-导入带有子路由的库/ npm模块时正确路由

时间:2018-06-26 10:10:17

标签: angular routes node-modules angular6 ng-packagr

我在此guide之后构建了Angular 6库模块,并在库中运行了一个虚拟应用程序,因此我可以在开发期间导入和测试模块。

我从库中导入的库模块具有子路由。我认为这是此问题的根本原因。双关打算。库模块的路由模块如下所示:

// Library Module routing
const routes: Routes = [{
    path: '',
    children: [
        { path: '', component: LoginFormComponent },
        { path: 'forgot-password', component: ForgotPasswordFormComponent }
    ]
}];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class LoginRoutingModule {}

在我的虚拟应用程序中,我有一个模块模块,可通过应用程序路由模块延迟加载:

// Dummy app root routing
const appRoutes: Routes = [
    {
        path: '',
        children:  [{
            path: 'modules',
            loadChildren: './modules/modules.module#ModulesModule'
        }]
    },
    { path: '**', redirectTo: '' }
];

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

模块模块文件是我导入库模块的地方,如下所示:

// Dummy app modules routing
import { LoginModule } from '@library-namespace/modules';
import { environment } from '../../environments/environment';

@NgModule({
    imports: [
        CommonModule,
        LoginModule.forRoot(environment)
    ],
    declarations: [ ModulesComponent ]
})
export class ModulesModule { }

导航到localhost:4200 / modules时,即使modules.component.html文件没有Library Module的组件选择器,库模块也会被实例化。我的modules.component.html文件中的所有其他内容也没有出现。我认为这是因为库模块的根路径是''?我在传递函数时需要包括组件选择器,以监视eventEmitter。选择器如下所示:

<lib-login (loginEvent)="login($event)"></lib-login>

我想在虚拟应用程序中导航到localhost:4200 / modules,显示库模块,并在虚拟应用程序的模块组件中捕获事件发射器。

0 个答案:

没有答案