如何從Angular中的另一個模塊引用和使用組件？

Question

在我的app.component.html中，我為自定義組件添加了新標簽，因此其外觀如下所示。 應用程序崩潰，該錯誤表明該模塊的一部分無法識別app-main-menu-bar ，並要求我進行驗證。 好吧，不是，但是我仍然想通過導入另一個模塊來使用它。

<div>
  <app-main-menu-bar></app-main-menu-bar>
  <router-outlet></router-outlet>
</div>

我確保菜單組件已向其持有者宣布（我已經嘗試過引用該組件本身以及它所在的模塊）。

import { MainMenuBarComponent } from "./nav/nav.module";
// import { MainMenuBarComponent } from "./nav/main-menu-bar/main-menu-bar.component";

我還確保菜單模塊已向應用程序模塊宣布。

import { NavModule } from "./nav/nav.module";
import { AppComponent } from "./app.component";
...
@NgModule({
  declarations: [AppComponent],
  imports: [NavModule, ...],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

組件本身是帶有選擇器的Angular組件。

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-main-menu-bar",
  templateUrl: "./main-menu-bar.component.html",
  styleUrls: ["./main-menu-bar.component.scss"]
})
export class MainMenuBarComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

它位於一個導出它的模塊中。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MainMenuBarComponent } from "./main-menu-bar/main-menu-bar.component";

export { MainMenuBarComponent } from "./main-menu-bar/main-menu-bar.component";

@NgModule({
  imports: [CommonModule],
  declarations: [MainMenuBarComponent]
})
export class NavModule { }

我知道我缺少什么，但我無法想象。

Answer 1

您需要在NavModule內添加MainMenuBarComponent unde exports

@NgModule({
  imports: [CommonModule],
  declarations: [MainMenuBarComponent],
  exports : [MainMenuBarComponent]
})