Question

在Angular 2 RC.5中，我无法找到上述错误的修复：

Unhandled Promise rejection: Template parse errors:
No provider for FormGroupDirective ("p>Custom begin </p>
      <p>Host contains {{hostFormGroup.directives.length}} directives</p>
      [ERROR ->]<nested></nested>
      <p>Custom end </p>
    </div>
"): CustomComponent@4:6 ; Zone: <root> ; Task: Promise.then ; Value:

当嵌套在另一个自定义组件中的自定义组件依赖于包含@Host() hostFormGroup: FormGroupDirective时，会发生

。

此处显示了该情景plunker。 AppComponent 显示一个响应/模型驱动的表单（暂时没有控件，但此时并不重要）包含 CustomComponent ，而后者又有一个 > NestedComponent 。有关错误详细信息，请参阅开发者控制台。

第一级自定义组件可以依赖托管 FormGroupDirective ，但不会影响该问题。如果它具有依赖性，则可以正确解析。第二级自定义组件也不会发生同样的情况，无论第一级组件是什么。

如果在 AppComponent 中直接使用相同的 NestedComponent ，问题就会消失。

我错过了什么？ TA

这是代码的主要部分，供参考：

import { Component, Host } from '@angular/core';
import {
  REACTIVE_FORM_DIRECTIVES, FormBuilder,
  FormGroup, FormGroupDirective
} from '@angular/forms';

///////////////////////
// Nested

@Component({
  selector: 'nested',
  template: `
    Nested begin<br/>
    Nested end <br/>
  `,
})
class NestedComponent {
  constructor(
    @Host() private hostFormGroup: FormGroupDirective) {
  }
}

///////////////////////
// Custom

@Component({
  selector: 'custom',
  template: `
    Custom begin <br/>
    <nested></nested> <br/>
    Custom end <br/>
  `,
  directives: [NestedComponent],
})
class CustomComponent {
  constructor(
    @Host() private hostFormGroup: FormGroupDirective) {
  }
}

///////////////////////
// App

@Component({
  selector: 'my-app',
  template: `
  <h1>Angular 2 - @Host() issue</h1>
  <form [formGroup]="mainForm" accept-charset="UTF-8" role="form">
    <fieldset>
      <custom></custom>
    </fieldset>
  </form>
  `,
  directives: [REACTIVE_FORM_DIRECTIVES, CustomComponent],
})
export class AppComponent {
  constructor(formBuilder: FormBuilder) {
    this.mainForm = formBuilder.group({});
  }
}

Answer 1

错误消息指向正确的方向。您需要声明FormGroupDirective是提供者。即

@Component({
    ...
    providers: [FormGroupDirective]
});

否则，您需要在更高级别声明它，例如在模块中，这样您就可以在模块范围内使用它。

Answer 2

删除@Host（）装饰器和额外的提供者，它可以工作。

@Component({
  selector: 'nested',
  template: `
    <div>
      <p>Nested begin </p>
      <p>Host contains {{hostFormGroup.directives.length}} directives:</p>
      <span *ngFor="let directive of hostFormGroup.directives">{{directive.name}}</span>
      <p>Nested end </p>
    </div>
  `,
  // tried this: no error, but injected one is not the actual container
  // and it containes no directive
  // without it: still same error 'No provider for FormGroupDirective'
  //providers: [FormGroupDirective],
})
class NestedComponent {
  constructor(
    private hostFormGroup: FormGroupDirective) {
  }
}
// Custom

@Component({
  selector: 'custom',
  template: `
    <div>
      <p>Custom begin </p>
      <p>Host contains {{hostFormGroup.directives.length}} directives:</p>
      <span *ngFor="let directive of hostFormGroup.directives">{{directive.name}}</span>
      <nested></nested>
      <p>Custom end </p>
    </div>
  `,
  directives: [NestedComponent],
  // tried this: still same error 'No provider for FormGroupDirective'
  //providers: [FormGroupDirective],
})
class CustomComponent {
  constructor(
    private hostFormGroup: FormGroupDirective) {
  }
}

http://plnkr.co/edit/ktvnjm?p=preview

在Angular 2嵌套自定义组件中没有FormGroupDirective的提供程序

2 个答案: