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。

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

Answer 2

您需要改用<app-api-lab-category-card></app-api-lab-category-card>。它需要匹配在category-card.component.ts

中找到的组件的选择器

Answer 3

您的api-lab.component.html模板具有api-lab-category-card，但组件选择器为app-api-lab-category-card。

使用ng generate component some-component-name命令时，CLI将自动在前缀“ app”之前添加前缀。您可以通过更改angular.json文件中项目的“ prefix”属性来进行修改。

组件不是已知元素[Angular]

3 个答案: