Question

问题

在我的应用程序中，我有一个SharedModule，它声明了整个应用程序在多个模块中使用的所有组件和指令。

当我决定在整个应用程序的所有表单中都使用反应性表单（而不是模板驱动的表单）时，我决定将SharedModule中的ReactiveFormsModule导入仅导入一次并使其我所有的feature modules都可以使用。有趣的是，我不会重新导出ReactiveFormsModule。

shared.module.ts

(...)
import { ReactiveFormsModule } from '@angular/forms';
(...)

@NgModule({
  imports: [
    (...),
    ReactiveFormsModule,
    (...)
   ],

   declarations: [
     (...)
   ],

   exports: [
     // ReactiveFormsModule is not re-exported here!
     (...)
   ],
}
export class SharedModule {}

在我的应用中，我有一个UsersModule，它会导入SharedModule并声明UsersAddComponent：

users.module.ts

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UsersRoutingModule,
  ],
  declarations: [
    UsersRootComponent,
    UsersAddComponent,
    UsersIndexComponent,
  ],
})
export class UsersModule {}

users-add.component.html

(...)
<!-- Name -->
<npc-form-control-text
  [label]="'name' | translate"
  [formControl]="name"
>
</npc-form-control-text>
(...)

有效。这让我感到惊讶！引用Angular NgModules documentation：

默认情况下，声明是私有的。如果此模块不导出   UserComponent，那么只有此模块中的组件可以使用   UserComponent。

导入模块不会自动重新导出导入的模块   模块的导入。模块'B'不能仅由于其导入而使用ngIf   导入CommonModule的模块“ A”。模块“ B”必须导入   CommonModule本身。

因此，UsersModule不会直接导入ReactiveFormsModule-它只会导入SharedModule，而后者会导入ReactiveFormsModule但不会导出-它不应访问{ {3}}。但是，确实如此，一切正常。一旦我从ReactiveFormsModule导入数组中删除了SharedModule，它就会停止工作并产生错误：

Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("
  <input
    [type]="type"
    [ERROR ->][formControl]="formControl"
    class="FormControl-input"
  />
"): ng:///SharedModule/FormControlTextComponent.html@10:4

问题

为什么我不需要为ReactiveFormsModules组件中能够使用SharedModule的组件UsersModule中的FormControlDirective重新导出？

Answer 1

Angular总是显示发生了什么事的提示：

ng:///SharedModule/FormControlTextComponent.html@10:4
      ^^^^^^^^^^^^

我们可以看到您的FormControlTextComponent是在SharedModule中声明的，这就是为什么从ReactiveFormsModule中删除SharedModule会破坏此组件的原因。

为什么不需要直接导入ReactiveFormsModule来使用FormControlDirective？

问题

问题

1 个答案: