Question

这是我在我的应用中共享的shared模块：

@NgModule({
  imports: [
    CommonModule,
    ModalModule
  ],
  declarations: [],
  exports: [
    ModalModule
  ]
})

export class SharedModule {}

此shared模块导入ModalModule：

import {ModalCloseDirective, ModalOpenDirective, ModalApiService, ModalCloseComponent} from './shared';
import {ModalComponent} from './modal.component';

@NgModule({
  declarations: [
    ModalCloseDirective,
    ModalOpenDirective,
    ModalComponent,
    ModalCloseComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ModalCloseDirective,
    ModalOpenDirective,
    ModalComponent,
    ModalCloseComponent
  ],
  providers: [
    ModalApiService
  ]
})

export class ModalModule {}

然后我有第三个模块，导入SharedModule（导出ModalModule）：

import {SharedModule} from '../../shared';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild([
      {
        path: 'documentation',
        component: DocumentationComponent,
        children: [
          {
            path: '',
            component: DocumentationListComponent
          }
        ]
      }
    ]),
    SharedModule
  ],
  declarations: [
    DocumentationListComponent
  ],
  exports: [
    RouterModule
  ]
})
export class documentationModule {}

然后我有这个指令modalOpen：

@Directive({
  selector: '[modalOpen]'
})

export class ModalOpenDirective {

  modalOpen: string;

  constructor(private modalApi: ModalApiService) {}

  @HostListener('click')
  open(): void {
    this.modalApi.open(this.modalOpen);
  }
}

但是当我在DocumentationListComponent的模板中使用它时：

<span [(modalOpen)]="new-item">Add item</span>

我明白了：

Can't bind to 'modalOpen' since it isn't a known property of 'span'

为什么不能在我的模板中找到该指令？

编辑：我想要的基本上是本指南中的一个功能模块：https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 1

我刚刚意识到它为什么不起作用，所以我会在这里留下一个解释，以防其他人也被这个问题困住。基本上，当您使用[modalOpen]或[(modalOpen)]时，它会引发错误，因为如果您使用它们，它会认为span元素具有modalOpen作为属性，它不会吨。

因此，我在@Input() modalId指令中添加了modalOpen，并将此ID传递给：

<span modalOpen modalId="new-item">Add item</span>

它有效。

感谢@peeskillet让我意识到这一点。

Angular 2不能使用自定义指令

1 个答案: