angular - 组件不是已知元素 [Angular]

Question

我目前是第一次使用 Angular。我有一个名为 Api-Lab 的模块和一个名为 Category-Card 的组件。我项目的结构是:

-app
    -[+]api-lab
        -[+]category-card
            category-card.component.ts
        api-lab.component.ts
        api-lab.module.ts
    app.module.ts
    app.routing.ts

在 api-lab.component.html 中，我在这部分 HTML 代码的标题中得到了错误:

<div class="col-md-8 " *ngFor="let category of apiList">
            <api-lab-category-card [image]="category.image" [icon]="category.icon" [title]="category.title"
            [description]="category.description" [buttonLink]="category.buttonLink"></api-lab-category-card>
        </div>

这是 api-lab.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiLabComponent } from './api-lab.component';
import { SharedModule } from '../shared';
import { CategoryCardComponent } from './category-card/category-card.component';

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [ApiLabComponent, CategoryCardComponent],
  exports: [ApiLabComponent]
})
export class ApiLabModule {}

这是 category-card.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-api-lab-category-card',
  templateUrl: './category-card.component.html',
  styleUrls: ['./category-card.component.scss']
})
export class CategoryCardComponent implements OnInit {
  constructor() { }
  @Input() image: string;
  @Input() icon: string;
  @Input() title: string;
  @Input() description: string;
  @Input() buttonLink: string;
  ngOnInit() { }
}

最后是 app.module.ts:

import { ApiLabModule } from './api-lab/api-lab.module';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  // return new TranslateHttpLoader(http);
  // modifichiamo la sede di default dei file di traduzione
  return new TranslateHttpLoader(http, './assets/translations/', '.json');
}

@NgModule({
  declarations: [
  //...declarations
  ],
  imports: [
    HomeModule,
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    ApiLabModule,
  ],
  providers: [
    TranslatorService,
    StyleService,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我查看了其他类似我的问题，但我无法解决问题。我肯定错过了一些导入/声明。有什么建议吗？

Answer 1

您在 category-card 中指定的选择器组件是 app-api-lab-category-card ，但您已将其引用为 <api-lab-category-card>在 api-lab.component.html .

要么将选择器改为drop app从头开始，或更改 api-lab.component.html引用<app-api-lab-category-card> .