Angular2异常：没有服务提供者

Question

当我有嵌套在根组件下的组件时，我无法实例化我的应用程序，该组件providing在其构造函数中使用。

import {Component, Injectable} from 'angular2/core';


@Component()
export class GrandChild(){
  constructor () {
    this.hello = "hey!"
  }
}

@Component({
  providers: [GrandChild]
})
@Injectable()
export class Child {
    constructor(public grandchild: GrandChild) {
        this.grandchild = grandchild;
    }
}

@Component({
    providers: [Child],
    template: `Everything rendered fine!`,
    selector: 'app'
})

export class App {
    kid: Child;

    constructor(public child: Child) {
        this.kid = child;
    }
}

EXCEPTION: No provider for GrandChild! (App -> Child -> GrandChild)

我想知道为什么这种行为是非法的。假设我想在GrandChild班级中使用该类，Child而只是在Child班级中引用App该类。这似乎是不可能的。

创建provide层次结构的正确方法是什么？

谢谢你

PLNKR：http
://plnkr.co/edit/5Z0QMAEyZNUAotZ6r7Yi?p=preview

Answer 1

您可以直接将父组件注入到组件中，而无需将其指定到组件提供程序中。为此，您需要在其他组件中使用组件并将其设置为directives属性：

@Component({
  selector: 'child',
  template: `
    <div></div>
  `
})
export class Child {
  constructor(@Inject(forwardRef(() => App)) parent: App) {
  }
}

@Component({
  directives: [Child],
  template: `
    Everything rendered fine!
    <child></child>
  `,
  selector: 'app'
})
export class App {
  constructor() {
  }
}

你是什么样的一个有点奇怪的是，你没有界定selector和template对组件的属性Child和GrandChild。它们真的是组成部分吗？

在您的样本中，您以错误的方式制作东西。如果要从父组件获取子组件的实例，则需要利用@ViewChild装饰器通过注入从父组件引用子组件：

import { Component, ViewChild } from 'angular2/core';

(...)

@Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App</h1>
    <child></child>
    <button (click)="submit()">Submit</button>
  `,
  directives:[App]
})
export class AppComponent { 
  @ViewChild(SearchBar) searchBar:SearchBar;

  (...)

  someOtherMethod() {
    this.searchBar.someMethod();
  }
}

这是更新的plunkr：http
://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview 。

您会注意到，@Query也可以使用参数装饰器：

export class AppComponent { 
  constructor(@Query(SearchBar) children:QueryList<SearchBar>) {
    this.childcmp = children.first();
  }

  (...)
}

您会注意到，@Injectable拥有装饰器时，您不需要装饰器@Component…