如何引用和使用Angular中另一个模块的组件？-Java 学习之路

在我的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 { }

我明白我错过了什么，但我无法想象 .

1 回答

您需要在NavModule中添加 MainMenuBarComponent unde导出

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

回复于 2024-05-09T08:40:20+08:00

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

1 回答

相关问题