6

我按照本指南构建了一个 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 {}

在我的虚拟应用程序中，我有一个由 App Routing 模块延迟加载的 Modules 模块：

// 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 { }

Modules 模块文件是我导入库模块的地方，如下所示：

// 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 文件没有库模块的组件选择器，库模块也会被实例化。我的 modules.component.html 文件中的所有其他内容也不会出现。我认为这是因为 Library Module 的根路径是 ' ' ？当我传入函数以监视 eventEmitter 时，我需要包含组件选择器。选择器如下所示：

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

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

4

0 回答 0