web-dev-qa-db-fra.com

Angular 2. @Input car ce n'est pas une propriété connue de

J'ai un composant parent avec le template suivant:

<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>

Et puis application essayer de montrer il me dire:.

Erreurs d'analyse de modèle:

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.

Un texte de composant enfant:

@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 = {};

 ....
}

Comment le réparer?

angularinputpropertiesbind
19
Alexander Zakusilo

Impossible de se lier à 'config_private' car il ne s'agit pas d'une propriété connue de 'blocks-banners-slideshow'.

Cela signifie qu'il ne peut pas trouver config_private donc il y a 3 façons de résoudre ce problème

  1. Ajouter la propriété manquante au composant
  2. Dans le composant, modifiez la propriété de config_public à config_private
  3. Dans le .html, remplacez la propriété liée de config_private par config_public.

Première option - Ajouter la propriété manquante au composant

@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 = {};

 ....
}


Seconde option - Dans le composant, modifiez la propriété de 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>

Comme je ne vois pas de propriété liée liée à [config_public]="...", essayez de remplacer config_public par config_private dans votre composant.

@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 = {};

 ........
}


Troisième option - Dans le .html, remplacez la propriété liée de config_private par config_public

Essayez de changer la propriété liée en 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>

Mettre à jour

Assurez-vous que le composant est déclaré dans le module apps

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 { }
13
Logan H

Pour moi, cette erreur est survenue parce que j'ai écrit

@Input

au lieu de

@Input()

avant la propriété.

4
Matthias

Si vous utilisez Ionic 2 avec un chargement différé, vous risquez d’oublier d’inclure la déclaration de votre bloc dans le module page. Dans ce cas, l'erreur sera la même.

3
Alexander Zakusilo

Je voudrais développer Alexander Zakusilo pour répondre un peu parce que je pense que ce qu'il a dit était mon problème, mais cela n'a pas immédiatement cliqué pour moi ...

Un excellent stack overflow post à propos du chargement paresseux avec Ionic 3 qui contient des liens vers la documentation ... 

Disons que vous avez un groupe de composants regroupés dans un module de composant.

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

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

Et vous souhaitez utiliser l'un de ces composants dans une page ionique que vous chargez paresseux ... Vous devez importer votre module de composants dans le module de page où vous souhaitez utiliser le composant.

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

Mon problème était que j'importais mon module de composants dans mon module d'application initialisé et m'attendais à ce qu'il fonctionne. Et si vous n'êtes pas paresseux, ce sera le cas, car tout existera dans le module d'application.

0
noWayhome