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

J'ai eu un composant parent avec le modèle 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 il essaie de montrer de me dire:
Non gérée Promesse de rejet:

Modèle erreurs d'analyse:

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 composant enfant de texte:

@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 résoudre ce problème?

source d'informationauteur Alexander Zakusilo | 2016-10-13

  1. 10

    Ne peut pas se lier à 'config_private', car il n'est pas connu de la propriété de blocs-bannières-diaporama".

    Signifie qu'il ne peut pas trouver config_private il y a donc 3 façons de le faire sur la résolution de ce

    1. Ajouter la propriété à la composante
    2. Dans le composant, modifier la propriété d' config_public à config_private
    3. Dans le .html changement de la limite de propriété de config_private à config_public

    Première Option - Ajouter la propriété à la composante

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

 ....
}


    Deuxième option - Dans le composant, modifier la propriété d' 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>

    Car je ne vois pas [config_public]="..." propriété d'être lié essayez de changer config_public à 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 changement de la limite de propriété de config_private à config_public

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

    Mise à jour

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

    app.le 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 { }
  2. 3

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

    @Input

    au lieu de

    @Input()

    avant de la propriété.

  3. 2

    Si vous utilisez Ionique 2 avec le chargement paresseux alors vous avez peut-être oublié d'inclure la déclaration de votre bloc dans la page module. Dans ce cas, l'erreur sera le même.

  4. 0

    Je souhaite étendre sur Alexander Zakusilo réponse un peu, parce que je pense que ce qu'il a dit a ma question, mais il n'a pas immédiatement cliquez sur pour moi...

    Un grand un débordement de pile post sur le chargement paresseux avec Ionique 3 qui a une certaine inclus des liens vers des docs...

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

    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 un ioniques page que vous êtes paresseux chargement... Vous devez importer vos composants de module dans le module page où vous souhaitez utiliser le composant.

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

    Mon problème était que j'étais l'importation de mes composants module dans mon bootstrap application module et en espérant que cela fonctionne. Et si vous n'êtes pas le chargement paresseux, il va, parce que tout ce qui existe dans l'application du module.