子组件HTML不在DOM中时呈现

Question

我已经创建了一个常规搜索组件，并在CoreModule中进行了声明，并将模块导入了CoreModule中。

现在，当我使用常规搜索组件时，它的HTML不在DOM中呈现，但是当浏览器中的inspect元素时，该组件的选择器位于同一位置，但没有其内部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() {}
}

CoreModule：

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

AppModule：

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>

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