子组件 HTML 在 DOM 中时未呈现答案

【问题标题】：Child component HTML is not rendering while is in the DOM子组件 HTML 在 DOM 中时未呈现
【发布时间】：2020-02-25 03:45:31
【问题描述】：

我已经创建了一个通用搜索组件并在 CoreModule 中声明并在 CoreModule 中导入了模块。

现在，当我使用通用搜索组件时，它的 HTML 不会在 DOM 中呈现，但是当在浏览器中检查元素时，组件的选择器位于同一位置，但没有其内部 HTML。

搜索组件 HTML：

<div>
<a class="header-link search-link">
    <i class="fa fa-search icon text-white" aria-hidden="true"></i>
    <p class="site-header-text text-white">Search</p>
</a>
<div class="onclick-search-div mb-3 position-relative" style="display:none;">
    <input type="text" class="referling-search" placeholder="ClassPass .etc" aria-describedby="basic-addon2">
    <i class="fa fa-search search-icon position-absolute" aria-hidden="true"></i>
    <div class="searched-items">
        <ul class="bgWhite">
            <li></li>
        </ul>
    </div>
</div>

搜索组件 TS：

import { Component } from "@angular/core";
@Component({
  selector: 'app-header-search-bar',
  templateUrl: './header-search-bar.html',
  styleUrls:['./header-search-bar.css']
})
export class HeaderSearchBarComponent {
   constructor() {}
}

核心模块：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderSearchBarComponent } from "./components/header-search- 
bar/header-search-bar";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        HomeHeaderComponent
    ]
 })
 export class CoreModule {}

应用模块：

import { NgModule } from "@angular/core";
import { CommonModule } from"@angular/common";
import { HomeComponent } from "./components/home/home.component";
import { CoreModule } from './core/core.module';

@NgModule({
    imports: [
        CommonModule,
        CoreModule 
    ],
    declarations: [
        HomeComponent
    ]
})
export class CoreModule {}

HomeComponent.html：

<app-header-search-bar></app-header-search-bar>

【问题讨论】：

我相信你也需要把它放在 CoreModule 的导出中。还有，什么是 HomeHeaderComponent？

标签： html angular typescript angular7

【解决方案1】：

您需要导出 HomeHeaderComponent 才能在 AppModule 中使用，

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HeaderSearchBarComponent } from "./components/header-search- 
bar/header-search-bar";

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        HomeHeaderComponent
    ]
    exports : [
        HomeHeaderComponent
    ]
 })
 export class CoreModule {}

【讨论】：