Блог

Главная - Вопросы по программированию - Angular2 Final: привязка к хосту больше не работает

Angular2 Final: привязка к хосту больше не работает

#angular

#angular

Вопрос:

Вот как я привязал хост к атрибуту кнопки с именем «disabled» в родительском компоненте в ng2-RC4:

 @Component({
    selector: "nav-next",
    template: `
    <div class="nav-next-directive" (click)="onClick($event)">
        <button color="primary" class="primary" [attr.disabled]="disabled">
            <ion-spinner *ngIf="ngIf === true" icon="lines"></ion-spinner>
            {{buttonTitle}}
        </button>
    </div>`
})

export class NavNextDirective {

    @HostBinding("attr.disabled"); 
    @Input() isValid: boolean;

Это больше не работает (ngc жалуется) Теперь я прошел половину пути, частично изменив приведенное выше на:

 @HostBinding("attr.disabled") isValid: boolean = true;
@Input() isValid: boolean;

Тем не менее, ngc говорит:

 Can't bind to 'isValid' since it isn't a known property of 'nav-next'.
1. If 'nav-next' is an Angular component and it has 'isValid' input, then verify that it is part of this module.
2. If 'nav-next' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
    <ion-list>
        <nav-next (click)="save()"
                  [ERROR ->][isValid]="goalForm.valid"
                  [serverWaiting]="serverWaiting"
                  button"): GoalDefineAmountComponent@30:18

Есть идеи, как теперь работает привязка к хосту?

Ответ №1:

Ошибка не имеет ничего общего с привязкой к хосту. Речь идет о NavNextDirective том, что компонент, пытающийся его использовать, не известен

Потребности NavNextDirective должны быть в той же области, что и компонент, который его использует. Это означает, что вы можете либо объявить его в том же модуле

 @NgModule({
  declarations: [ NavNextDirective, ComponentThatUsesNavNextDirective ]
})
class SomeModule {}

Или, если NavNextDirective она должна использоваться разными модулями, либо объявите и экспортируйте директиву в свой собственный модуль, либо в общий модуль, и импортируйте этот модуль в модули, в которых есть компоненты, использующие эту директиву

 @NgModule({
  declarations: [ NavNextDirective ],
  exports: [ NavNextModuleDirective ]
})
class NavNextModule {}

// OR

@NgModule({
  declarations: [ NavNextDirective ],
  exports: [ NavNextModuleDirective ]
})
class SharedModule {}

Затем импортируйте его

 @NgModule({
  imports: [ SharedModule ]
  declarations: [ ComponentThatUsesNavNextDirective ]
})
class ModuleWithComponentThatUsesNavNextDirective {}

Я думаю, что у некоторых людей есть заблуждение, что компоненты / директивы нужно импортировать только один раз в модуль приложения, и все остальные модули могут его использовать. Это не тот случай

 @NgModule({
  imports: [ ModuleWithComponentThatUsesNavNextDirective ],
  declarations: [ NavNextDirective ] 
})
class AppModule {}

Здесь ModuleWithComponentThatUsesNavNextDirective не видно NavNextDirective объявленного в AppModule . Необходимо либо объявить саму директиву, либо imports модуль, который exports использует директиву. Но обратите внимание, что компонент может быть объявлен любым модулем только один раз. Поэтому, если компонент должен использоваться многими модулями, вам следует либо создать модуль специально для этого компонента, либо создать общий модуль, содержащий множество повторно используемых компонентов.

Метки: