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

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

无法绑定到'config_private',因为它不是'blocks-banners-slideshow'的已知属性.

意味着它找不到config_private所以有3种方法可以解决这个问题

1. 将缺少的属性添加到组件
2. 在组件中,将属性更改config_public为config_private
3. 在将.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为config_public

尝试将绑定属性更改为 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>

更新

确保在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 { }

Answer 2

对我来说，发生此错误是因为我写了

@Input

代替

@Input()

在财产之前。