page - Angular 2. @Input ya que no es una propiedad conocida de

navigationend angular 4

Question

Tengo un componente principal con la siguiente plantilla:

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

Y luego la aplicación intenta mostrarlo, dime: rechazo de la promesa no controlada:

Errores de análisis de plantilla:

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 texto componente infantil:

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

 ....
}

¿Como arreglarlo?

Answer 1

No se puede enlazar a ''config_private'' ya que no es una propiedad conocida de ''blocks-banners-slideshow''.

Significa que no puede encontrar config_private por lo que hay 3 formas de solucionar esto

1. Agregue la propiedad faltante al componente
2. En el componente, cambie la propiedad de config_public a config_private
3. En el .html cambie la propiedad enlazada de config_private a config_public

Primera opción : agregar la propiedad que falta al componente

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

 ....
}

Segunda opción : en el componente, cambie la propiedad de config_public a 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>

Dado que no veo una [config_public]="..." está config_public intente cambiar config_public a config_private en su componente

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

 ........
}

Tercera opción : en .html cambie la propiedad enlazada de config_private a config_public

Intenta cambiar la propiedad enlazada a 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>

Actualizar

Asegúrate de que el componente está declarado en el módulo de aplicaciones

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

Answer 2

Para mí, este error ocurrió porque escribí

@Input

en lugar de

@Input()

Antes de la propiedad.

Answer 3

Quiero ampliar un poco la respuesta de Alexander Zakusilo porque creo que lo que dijo fue mi problema, pero no hizo clic para mí de inmediato ...

Un gran post de desbordamiento de pila sobre la carga perezosa con Ionic 3 que tiene algunos enlaces incluidos a documentos ...

Digamos que tiene un montón de componentes agrupados en un módulo de componentes.

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

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

Y desea utilizar uno de esos componentes en una página iónica que está cargando perezosamente ... Debe importar el módulo de sus componentes al módulo de la página donde desea usar el componente.

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

Mi problema era que estaba importando mi módulo de componentes a mi módulo de aplicación bootstrapped y esperaba que funcionara. Y si no está cargando perezoso, lo hará, porque todo existirá en el módulo de la aplicación.

Answer 4

Si está utilizando Ionic 2 con carga lenta, es posible que se le olvide incluir la declaración de su bloque en el módulo de la página. En este caso el error será el mismo.