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?
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
config_public
à config_private
.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>
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 { }
Pour moi, cette erreur est survenue parce que j'ai écrit
@Input
au lieu de
@Input()
avant la propriété.
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.
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.