0

これは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） 3番目のモジュールがあります。

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

4

1 に答える 1

0

うまくいかない理由がわかったので、他の人がこれで行き詰まった場合に備えて、ここに説明を残しておきます. 基本的に、使用する[modalOpen]か[(modalOpen)]、エラーをスローすると、それらを使用すると、span要素がmodalOpen属性として持っていると見なされますが、そうではありません。

代わりに@Input() modalId、modalOpenディレクティブに を追加し、代わりに次のように ID を渡します。

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

そしてそれは動作します。

これを実現させてくれた@peeskilletに感謝します。

于 2016-10-16T15:03:55.190 に答える