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导出

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

如何引用和使用Angular中另一个模块的组件？

1 个答案: