Question

我有一个包含以下模板的父组件：

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

然后应用程序尝试显示它告诉我：未处理的承诺拒绝：

模板解析错误：

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.

子组件文本：

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

 ....
}

如何解决？

Answer 1

无法绑定到＆＃39; config_private＆＃39;因为它不是“块 - 横幅 - 幻灯片”的已知属性。

意味着它无法找到y因此有3种方法可以解决这个问题

将缺少的属性添加到组件
在组件中，将属性从x更改为y
在config_private中将绑定属性从config_public更改为config_private

第一个选项 - 将缺少的属性添加到组件

.html

第二个选项 - 在组件中，将属性从config_private更改为config_public

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

 ....
}

由于我没有看到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>

[config_public]="..."

第三个选项 - 在config_public中将绑定属性从config_private更改为@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 = {}; ........ }

尝试将绑定属性更改为.html

config_private

更新

确保在apps模块中声明组件

<强> app.module.ts

config_public

Answer 2

对我来说，这个错误发生了，因为我写了

@Input

而不是

@Input()

在财产之前。

Answer 3

如果您使用延迟加载的Ionic 2，那么您可能忘记在页面模块中包含块的声明。在这种情况下，错误将是相同的。

Answer 4

我想扩展Alexander Zakusilo的答案，因为我认为他所说的是我的问题，但它没有立即点击给我......

关于Ionic 3延迟加载的一个很棒的stack overflow post，其中包含一些包含文档的链接......

我们假设您在组件模块中分组了许多组件。

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

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

并且您希望在延迟加载的离子页面中使用其中一个组件...您需要将组件模块导入到要使用该组件的页面模块中。

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

我的问题是我将我的组件模块导入到我的自举应用程序模块中并期望它能够正常工作。如果你没有延迟加载，它会，因为应用程序模块中将存在所有内容。

Angular 2. @Input，因为它不是已知的属性

4 个答案:

更新