I got a parent component with following template:
<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>
And then application try to show it tell me: Unhandled Promise rejection:
Template parse errors:
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.
A child component text:
@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 = {};
....
}
How to fix it?
Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.
Means it can't find config_private
so there are 3 ways to go about fixing this
config_public
to config_private
.html
change the bound property from config_private
to config_public
First Option - Add the missing property to the component
@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 = {};
....
}
Second option - In the component, change the property from config_public
to 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>
Since I don't see a [config_public]="..."
property being bound try changing config_public
to config_private
in your component
@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 = {};
........
}
Third Option - In the .html
change the bound property from config_private
to config_public
Try changing the bound property to 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>
Make sure component is declared in the apps module
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 { }