从自定义共享模块 Angular 5 渲染子组件答案

【问题标题】：Rendering Sub Component from custom shared modul Angular 5从自定义共享模块 Angular 5 渲染子组件
【发布时间】：2018-09-26 16:14:43
【问题描述】：

我是 Angular 新手，尝试在另一个组件中显示一个组件时遇到了麻烦。

架构：我有一个导航栏，可以让路由器插座使用路由导航到“component1”。然后在组件 1 中，我的标签保持原样。如果我使用路由导航到 component-2，它会正确呈现。

main.component.html

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

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>

component-2.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'component-2',
  templateUrl: './component-2.component.html',
  styles: [
      'component-2.scss'
  ]
})
export class Component2 implements OnInit {

  constructor() {
      console.log('COMPONENT CONSTRUCTED');
  }

  ngOnInit() {
      console.log('COMPONENT INITIALISED');
  }

}

custom-shared.module.ts

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

component-2.module.ts

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+。

提前致谢。文森特 B.

【问题讨论】：

标签： angular angular5 jhipster

【解决方案1】：

问题解决了，我的错误是认为如果我在 compent2-module 中导出 component2，然后在我的共享模块中导入这个模块，那么无论何时我导入我的共享模块，组件都可用。

解决方案是直接从共享模块中导出/声明component2。然后它在我导入共享模块的任何地方都可用。

希望这可以帮助一些人。再见

【讨论】：