模板解析错误：X 不是已知元素

Question

我的组件“国家/地区菜单”有一些问题。 该组件在另一个页面中工作正常，所以问题不在于组件（我不确定，但我认为我的组件还可以）。 可能声明有冲突，或者我不知道。

我的组件HTML：

<form [formGroup]="form">
    <ion-item>
        <ion-label floating>{{ 'NEW_EVENT_COUNTRY_HEADER' | translate }}*</ion-label>
        <ion-select (ionChange)="selectCountry(country)" formControlName="country">
            <ion-option *ngFor="let country of countries">{{country.name}}</ion-option>
        </ion-select>
    </ion-item>
</form>

我的组件TS

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';

/**
 * Generated class for the CountriesMenuComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'countries-menu',
  templateUrl: 'countries-menu.html',
})
export class CountriesMenuComponent {
  @Input() form: FormGroup;
  @Input() currentEvent?: Object;
  private countries: Object;

  constructor(private httpClient: HttpClient, private translate: TranslateService) {
    const url = 'assets/countries/' + this.translate.currentLang + '.json';
    this.httpClient.get(url).subscribe((data) => {
      this.countries =  data;
    },                                 (error) => {
      this.httpClient.get('assets/countries/en.json').subscribe((data) => {
        this.countries =  data;
      });
    });
  }

  selectCountry(country: any) {
    if (this.currentEvent !== undefined) this.currentEvent[country] = country;
  }
}

components.module.ts 我导出组件（还有很多其他组件，但我删除它们以节省空间）

import { CountriesMenuComponent } from './countries-menu/countries-menu';

@NgModule({
  declarations: [...],
  imports: [IonicModule],
  exports: [...,
    CountriesMenuComponent],
})
export class ComponentsModule { }

然后在我想要使用组件的模块中，我使用声明数组。

import { CountriesMenuComponent } from '../../components/countries-menu/countries-menu';

@NgModule({
  declarations: [
    PersonalInformationPage,
    CountriesMenuComponent,
  ],
  imports: [
    IonicPageModule.forChild(PersonalInformationPage),
    TranslateModule.forChild(),
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    LeadService,
  ],
})
export class PersonalInformationPageModule { }

但是当我使用我的 HTML 选择器时，我遇到了这个错误：模板解析错误：'countries-menu' 不是已知元素：

HTML

...
<ion-col>
  <countries-menu [form]="form"></countries-menu>
</ion-col>
...

我在另一个网页上做了同样的事情，它工作正常。 我试图将声明放在 app.module.ts 中，以访问所有应用程序，但它不起作用。 我不知道如何解决这个问题，也许我错过了什么？我不知道，但它在另一个页面上运行良好，没有其他任何东西。

感谢您的阅读。

Answer 1

不要声明已经在另一个模块中声明的类。请参阅此documentation。当我读到“我在另一个网页上做了同样的事情，它工作正常”时，我明白你犯了这个错误。因此，CountriesMenuComponent 只能在 ComponentsModule 中声明。

尝试在ComponentsModule 中声明您的组件，并在PersonalInformationPageModule 中导入此模块：

components.module.ts

import { CountriesMenuComponent } from './countries-menu/countries-menu';

@NgModule({
  declarations: [
      CountriesMenuComponent,
      ...          
  ],
  imports: [IonicModule],
  exports: [...,
    CountriesMenuComponent],
})
export class ComponentsModule { }

个人信息页面模块

@NgModule({
  declarations: [
    PersonalInformationPage,
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(PersonalInformationPage),
    TranslateModule.forChild(),
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    LeadService,
  ],
})
export class PersonalInformationPageModule { }