Ошибки разбора шаблона: X не является известным элементом - PullRequest
Новая
       24

Ошибки разбора шаблона: X не является известным элементом

0 голосов
/ 08 июня 2018

У меня есть проблема с моим компонентом 'стран-меню'.Компонент отлично работает на другой странице, поэтому проблема не в компоненте (я не уверен, но я думаю, что мой компонент в порядке).Возможно, в объявлении есть конфликт, или я не знаю.

Мой компонент 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-селектор, у меня появляется эта ошибка: Ошибки синтаксического анализа шаблона:'country-menu' - это не известный элемент:

HTML 

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

Я сделал то же самое на другой веб-странице, и она отлично работает.Я пытался поместить объявление в app.module.ts, чтобы иметь доступ ко всем приложениям, но это не работает.Я не знаю, как это исправить, может я что-то пропустил?Я не знаю, но он отлично работает на другой странице, без чего-либо еще.

Спасибо за чтение.

1 Ответ

0 голосов
/ 08 июня 2018

Не объявляйте класс, который уже объявлен в другом модуле.Смотрите эту документацию .Когда я читаю «Я сделал то же самое на другой веб-странице, и она работает нормально», я понимаю, что вы совершили эту ошибку.Следовательно, CountriesMenuComponent должен быть объявлен только в ComponentsModule.

Попробуйте объявить свой компонент в ComponentsModule и импортировать этот модуль в PersonalInformationPageModule:

components.module.ts 

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

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

PersonalInformationPageModule 

@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 { }
...