未识别 Angular 组件

Question

我的应用程序结构如下:

app
|-- author
|-- |-- posts
|-- |-- |-- posts.component.html
|-- |-- author.component.html
|-- 
|-- components
|-- |-- tag
|-- |-- |-- tag.component.ts

|-- home
|-- |-- home.component.html
|-- |-- ...
|-- ...
app.module.ts
graphql.module.ts

问题是我可以在 home.component.html 中访问我的 components/tag 组件，但无法在 author/posts/posts 中访问它。 component.html 甚至不在 author/author.component.html 中。

我已经在我的 app.module.ts 文件中导入了 tag 组件并且在家里工作正常。我无法检测到问题!

请帮我解决一下

编辑:app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

//& Root
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
//& Components
import { TagComponent } from "./components/tag/tag.component";
//& Routes
import { HomeComponent } from "./home/home.component";

@NgModule({
  declarations: [
    AppComponent,
    //& Routes
    HomeComponent,
    //& Components
    TagComponent
  ],
  imports: [
    //& Essential Modules
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    GraphQLModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.component.html, posts.component.html

<tag></tag>

Answer 1

问题是您在 AppModule 中声明了 TagComponent。这意味着 TagComponent 仅对该模块中声明的组件可见，例如 HomeComponent。您在其他模块(我猜是 GraphQLModule)中声明了 PostsComponent，因此它没有访问 TagComponent 的权限。

您有多种选择:

• 在 AppModule 中声明 PostComponent
• 创建一个导出 TagComponent 的 SharedModule，并将其导入到声明 PostsComponent 的模块中。
• 在声明 PostComponent 的模块中声明 TagComponent。

主要思想是，您需要组件在同一模块中相互声明或由导出它们的模块导入。