Angular 从自定义共享模块角度5渲染子组件
我是angular的新手,尝试在另一个组件中显示组件时遇到困难 模式: 我有一个导航栏,可以让路由器出口使用路由导航到“component1”。 然后在组件1中,我有一个标签,保持原样。 如果我使用布线导航到组件2,它将正确渲染 main.component.htmlAngular 从自定义共享模块角度5渲染子组件,angular,angular5,jhipster,Angular,Angular5,Jhipster,我是angular的新手,尝试在另一个组件中显示组件时遇到困难 模式: 我有一个导航栏,可以让路由器出口使用路由导航到“component1”。 然后在组件1中,我有一个标签,保持原样。 如果我使用布线导航到组件2,它将正确渲染 main.component.html <div class="flex"> <div> <router-outlet name="navbar"></router-outlet>
<div class="flex">
<div>
<router-outlet name="navbar"></router-outlet>
<div class="container-fluid col-10 offset-2">
<div class="row">
<div class="col-12">
<div class="card jh-card shadow">
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
</div>
<jhi-footer></jhi-footer>
</div>
</div>
</div>
</div>
</div>
component1.component.html
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class=""> searchBar</div>
<div> some text</div>
</div>
<div class="col-md-1"></div>
</div>
<component-2>test</component-2>
自定义共享的.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ClientSharedModule } from '../shared';
import { COMPONENT1_ROUTE, Component1 } from './';
@NgModule({
imports: [
ClientSharedModule,
RouterModule.forRoot([ COMPONENT1_ROUTE ], { useHash: true }),
],
declarations: [
Component1
],
entryComponents: [
],
providers: [
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class Component1Module {}
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {
Component2Module
} from './component-2/component-2.module';
@NgModule({
imports: [
Component2Module,
],
declarations: [
],
entryComponents: [],
exports: [
Component2Module
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class CustomSharedModule { }
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {RouterModule} from '@angular/router';
import {ClientSharedModule} from '../../shared';
import {
Component2Details,
Component2,
component2Route
} from './';
const ENTITY_STATE = [
component2Route,
];
@NgModule({
imports: [
ClientSharedModule,
RouterModule.forChild(ENTITY_STATE)
],
declarations: [
Component2,
Component2Details
],
entryComponents: [
Component2,
Component2Details
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class Component2Module {
constructor() {}
}
组件2.1.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ClientSharedModule } from '../shared';
import { COMPONENT1_ROUTE, Component1 } from './';
@NgModule({
imports: [
ClientSharedModule,
RouterModule.forRoot([ COMPONENT1_ROUTE ], { useHash: true }),
],
declarations: [
Component1
],
entryComponents: [
],
providers: [
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class Component1Module {}
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {
Component2Module
} from './component-2/component-2.module';
@NgModule({
imports: [
Component2Module,
],
declarations: [
],
entryComponents: [],
exports: [
Component2Module
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class CustomSharedModule { }
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {RouterModule} from '@angular/router';
import {ClientSharedModule} from '../../shared';
import {
Component2Details,
Component2,
component2Route
} from './';
const ENTITY_STATE = [
component2Route,
];
@NgModule({
imports: [
ClientSharedModule,
RouterModule.forChild(ENTITY_STATE)
],
declarations: [
Component2,
Component2Details
],
entryComponents: [
Component2,
Component2Details
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class Component2Module {
constructor() {}
}
我替换了组件的真实名称。
事实上,我在编译时和执行时都没有错误。
我认为它与范围相关或与注入相关,但我找不到解决方案。
如果有人能给我一些帮助,我将不胜感激
附加信息:Jhipster v 4.14.2
单片应用程序。角度5+
提前谢谢。
Vincent B.问题解决了,我的错误是,如果我在compent2模块中导出component2,然后在共享模块中导入此模块,那么无论我在哪里导入共享模块,该组件都是可用的 解决方案是直接从共享模块导出/声明component2。 然后,无论何时导入共享模块,它都是可用的 希望这能帮助一些人。 再见