web-dev-qa-db-ja.com

Angular 2.既知のプロパティではないため@Input

私は次のテンプレートを持つ親コンポーネントを得ました：

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

 ....
}

修正方法

angulartypescriptinputpropertiesbind
19
Alexander Zakusilo

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

 ....
}


2番目のオプション-コンポーネントで、プロパティを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 = {};

 ........
}


第3オプション-.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 { }
13
Logan H

私にとっては、私が書いたため、このエラーが発生しました

@Input

の代わりに

@Input()

プロパティの前。

5
Matthias

遅延読み込みでIonic 2を使用している場合、ページモジュールにブロックの宣言を含めるのを忘れている可能性があります。この場合、エラーは同じになります。

4
Alexander Zakusilo

私は彼が言ったことは私の問題だと思うので、アレクサンダー・ザクシロの答えを少し広げたいと思いますが、それはすぐにはクリックしませんでした...

すばらしい スタックオーバーフローポスト Ionic 3の遅延読み込みについて、ドキュメントへのリンクが含まれています...

コンポーネントモジュールにグループ化された多数のコンポーネントがあるとしましょう。

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

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

そして、遅延ロードしているionicページでこれらのコンポーネントの1つを使用します...コンポーネントを使用するページモジュールにコンポーネントモジュールをインポートする必要があります。

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

私の問題は、コンポーネントモジュールをブートストラップされたアプリモジュールにインポートし、動作することを期待していたことでした。また、遅延読み込みではない場合は、すべてがアプリモジュールに存在するため、読み込みが行われます。

0
noWayhome