2016-08-17 3 views
4

С момента обновления до Angular 2 RC 5 я выдаю некоторые проблемы. У меня есть 3 компонента (аккумулятор, сигнал и карты), которые используются в другом компоненте. Эти 3 компонента объявлены в одном модуле: модуль помощников. Вот код:Угловой 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'; 
     } 
    } 
} 

Но когда я пытаюсь использовать как-мою-батарею с уровнем входного сигнала, я получаю эту ошибку:

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

Компонент батареи должен быть используется в LijstComponent, декларации модуля:

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

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

Я создал решение, проблема заключается в уродовать вариант глотка. При установке параметра mangle на false (в config.js), сборка приложения и ошибка исчезли!