Angular 2. @Input, поскольку он не является известным свойством

Я получил родительский компонент со следующим шаблоном:

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_private]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>

И тогда приложение попытается показать это скажите мне: необработанное обещание отказа:

Ошибки разбора шаблона:

Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.
1. If 'blocks-banners-slideshow' is an Angular component and it has 'config_private' input, then verify that it is part of this module.
2. If 'blocks-banners-slideshow' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Текст дочернего компонента:

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон
})

export class BannersBlocksSlideShow extends AbstractBlock{
  list: Array<BannerItem>;
  mySlideOptions: any;

  //Входящие данные
  @Input() config: any;
  @Input() config_public: any;
  @Input() slideOptions = {};

 ....
}

Как это исправить?

Источник

4 ответа

Решение

Невозможно привязать к config_private, поскольку оно не является известным свойством блоков-баннеров-слайд-шоу.

Значит не могу найти config_private так что есть 3 способа исправить это

  1. Добавьте отсутствующее свойство в компонент
  2. В компоненте измените свойство с config_public в config_private
  3. в .html изменить связанное свойство с config_private в config_public

Первый вариант - добавить отсутствующее свойство в компонент

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон
})

export class BannersBlocksSlideShow extends AbstractBlock{
  list: Array<BannerItem>;
  mySlideOptions: any;

  //Входящие данные
  @Input() config: any;
  @Input() config_public: any;
  @Input() config_private: any; // <--- Add this
  @Input() slideOptions = {};

 ....
}


Второй вариант - в компоненте измените свойство с config_public в config_private

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_private]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>

Так как я не вижу [config_public]="..." свойство связано, попробуйте изменить config_public в config_private в вашем компоненте

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон
})

export class BannersBlocksSlideShow extends AbstractBlock{
  list: Array<BannerItem>;
  mySlideOptions: any;

  //Входящие данные
  @Input() config: any;
  @Input() config_private: any; // <--- Change this
  @Input() slideOptions = {};

 ........
}


Третий вариант - в .html изменить связанное свойство с config_private в config_public

Попробуйте изменить связанное свойство на config_public

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_public]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_public]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_public]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>

Обновить

Убедитесь, что компонент объявлен в модуле приложений

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { BannersBlocksSlideShow } from './banners-blocks-slideShow/banners-blocks-slideShow.component';


@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent,
        BannersBlocksSlideShow
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }
Источник

Для меня эта ошибка произошла, потому что я написал

@Input

вместо

@Input()

перед собственностью.

Источник

Если вы используете Ionic 2 с отложенной загрузкой, вы можете забыть включить объявление своего блока в модуль страницы. В этом случае ошибка будет такой же.

Источник

Я хочу немного расширить ответ Александра Закусило, потому что я думаю, что то, что он сказал, было моей проблемой, но это не сразу щелкнуло для меня...

Отличное сообщение о переполнении стека о ленивой загрузке с Ionic 3, в котором есть ссылки на документы...

Допустим, у вас есть несколько компонентов, сгруппированных в модуле компонентов.

const components = [
  GraphLineComponent,
  GraphDateRangeTabsComponent,
  GraphBarComponent,
];

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

И вы хотите использовать один из этих компонентов на ионной странице, которую вы лениво загружаете... Вам необходимо импортировать модуль компонентов в модуль страницы, где вы хотите использовать компонент.

@NgModule({
  declarations: [
    GraphPage,
  ],
  imports: [
    IonicPageModule.forChild(GraphPage),
    ComponentsModule,
  ],
})
export class GraphPageModule {}

Моя проблема заключалась в том, что я импортировал свой модуль компонентов в мой загруженный модуль приложения и ожидал, что он будет работать. И если вы не ленивые загрузки, это будет, потому что все будет существовать в модуле приложения.

Источник
Другие вопросы по тегам