Angular2决赛：主机绑定不再工作

这就是我主机绑定到ng2-RC4中父组件上名为“disabled”的按钮属性的方式：

@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表示：

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

无法绑定到'isValid'，因为它不是'nav next'的已知属性。
1.如果“nav next”是一个角度组件，且具有“isValid”输入，则验证它是否为该模块的一部分。
2.如果“nav next”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
("
][isValid]=“goalForm.valid”
[serverWaiting]=“serverWaiting”
按钮“）：GoalDefineAmountComponent@30:18

---

知道主机绑定现在是如何工作的吗？

这个错误与主机绑定无关。这是关于试图使用它的组件不知道的

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

在这里，

moduleWithComponents使用snavextdirective

无法看到

AppModule

中声明的

NavNextDirective

。它需要声明指令本身，或者导入导出指令的模块。但请注意，任何模块只能声明一次组件。因此，如果该组件将由许多模块使用，那么您应该为该组件创建一个专门的模块，或者创建一个包含大量可重用组件的共享模块

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