Question

我有两个npm包：components和app。 components一个应该包含可在多个应用程序中使用的可重用组件。我希望一些组件能够很好地与NgModule配合使用。

我有一个像这样定义的测试控件：

/// COMPONENTS PACKAGE

export const VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TestControlComponent),
  multi: true
};

@Component({
  selector: 'test-control',
  templateUrl: './test-control.component.html',
  styleUrls: ['./test-control.component.scss'],
  providers: [ VALUE_ACCESSOR ]
})
export class TestControlComponent implements OnInit, ControlValueAccessor { ... }

TestControlComponent具有所有界面元素但没有操作（为简洁起见，我跳过它们）。

在模块中，它就像那样导出：

@NgModule({
  imports: [
  ],
  declarations: [
    TestControlComponent
  ],
  exports: [
   TestControlComponent
  ]
})
export class ComponentModule {}

就像这样消耗：

// APP PACKAGE

app.module.ts：

import { ComponentModule } from '@company/components';
import { FormsModule } form '@angular/forms'

@NgModule({
   imports: [ FormsModule, ComponentModule ],
   ...
})

然后在app.module.ts中声明的某个组件中的用法：

<form #testForm="ngForm">
  <test-control name="name" [(ngModel)]=""></test-control>
</form>

这导致应用程序编译，但在运行时它会抛出core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'test' Error: No value accessor for form control with name: 'test'并且导入的控件停止工作。如果我将控件复制到app包并在app.module.ts中声明它 - 一切正常。

值存取器在那里，你知道为什么Angular无法识别这个吗？

Answer 1

您是否可以尝试将FormsModule导入imports: [] ComponentModule声明数组？似乎ngModel标记中使用的<test-control></test-control>属性是ComponentModule的一部分，但没有为其导入所需的模块。（实际上意味着添加评论，但SO不会让我这么做。）

当组件来自外部模块时，Angular 4无法看到值访问器

1 个答案: