2016-08-17 3 views
4

角度2 RC 5のアップデートではいくつか問題が発生しています。私は別のコンポーネントで使用される3つのコンポーネント(バッテリー、信号、マップ)を持っています。これらの3つのコンポーネントは、1つのモジュール、つまりヘルパーモジュールで宣言されています。 ここでは、コードです:角2 RC 5 - 「...」の既知のプロパティではないため、「...」にバインドできません

@NgModule({ 
    declarations: [ 
     SignalComponent, 
     BatteryComponent, 
     MapsComponent 
    ], 
    imports : [ 
     BrowserModule, 
     FormsModule 
    ], 
    exports: [ 
     SignalComponent, 
     BatteryComponent, 
     MapsComponent 
    ] 
}) 
export class HelpersModule { 
} 

バッテリーコンポーネントは次のようになります。

@Component({ 
    selector: 'as-my-battery', 
    template: ` 
     <i class="fa fa-{{icon}}" aria-hidden="true"></i> 
     ` 
}) 

export class BatteryComponent { 
    @Input() level: number; 
    @Output() icon: string; 
    // constructor() { } 

    ngOnInit() { 
     if (this.level < 5) { 
      this.icon = 'battery-empty'; 
     } else if (this.level >= 5 && this.level < 25) { 
      this.icon = 'battery-quarter'; 
     } else if (this.level >= 25 && this.level < 50) { 
      this.icon = 'battery-half'; 
     } else if (this.level >= 50 && this.level < 75) { 
      this.icon = 'battery-three-quarters'; 
     } else { 
      this.icon = 'battery-full'; 
     } 
    } 
} 

しかし、私は入力レベルでAS-私のバッテリーを使用しようとすると、私はこのエラーを取得:

Error: Uncaught (in promise): Template parse errors: 
Can't bind to 'level' since it isn't a known property of 'as-my-battery'. 
1. If 'as-my-battery' is an Angular component and it has 'level' input, then verify that it is part of this module. 
2. If 'as-my-battery' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(""checkbox" name={{data.name}} value={{data.name}}> {{data.name}} 
        <as-my-battery [ERROR ->][level]='data.battery'></as-my-battery> 
        <as-my-signal [level]='data.signal'></as-"): [email protected]:35 

他に誰かがこの問題を抱えていますが、最終的にはこの問題の解決策がありますか?

また、私はこのトピックを見つけましたが、それは私のための答えではありませんでした:Can't bind to 'data' since it isn't a known property of 'teach-data'

そして最後に、これは私のアプリのブートストラップです:

@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     NavbarModule, 
     LoginModule, 
     HelpersModule, 
     KaartModule, 
     LijstModule, 
     LogsModule, 
     InstellingenModule, 
     StatistiekenModule, 
     routing 
    ], 
    providers: [ APP_PROVIDERS, appRoutingProviders ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

バッテリー部品があることが必要

@NgModule({ 
    declarations: [ 
     LijstComponent 
    ], 
    imports: [ 
     BrowserModule, 
     HelpersModule 
    ], 
    exports: [ 
     LijstComponent 
    ] 
}) 
export class LijstModule { 
} 

LijstComponent:

LijstComponent、モジュールの宣言で使用
@Component({ 
    selector: 'as-lijst', 
    providers: [DataService, MarkerService, AlertService], 
    templateUrl: 'app/lijst/lijst.html', 
}) 

export class LijstComponent { 
... 
} 

とHTMLのスニペット(データはそのngFor *がループしている場合):

<as-my-battery [level]='data.battery'></as-my-battery> 
+0

どのモジュールでBatteryComponentを使用しますか? AppModule? –

+0

他のコンポーネント、LijstComponentでは、私の質問にコードを追加します –

答えて

0

私は解決策を設立し、問題が一息のuglifyオプションです。 mangleオプションをfalse(config.js内)に設定すると、アプリケーションのビルドとエラーはなくなりました!

関連する問題