Angular2例外：无提供服务 [英] Angular2 Exception: No provider for Service

问题描述

我无法实例化我的应用程序时，我有这根组件提供下嵌套组件它在它的构造函数中使用的组件。

I'm unable to instantiate my application when I have the component which is nested under the root component providing a component which it uses in it's constructor.

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)

我不知道为什么这种行为是违法的。比方说，我想用我的儿童类的<​​code>如GrandChild 类，然后直接引用儿童类在我的应用类。这似乎是不可能的。

I'm wondering why this behavior is illegal. Let's say I wanted to use the GrandChild class in my Child class and simply reference the Child class in my App class. This seems to be impossible.

什么是创建正确的方式提供层次？

What is the correct way to create the provide hierarchy?

感谢一大堆。

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

推荐答案

您可以直接注入父组件到一个组件而不指定它变成组件供应商。要做到这一点，你需要使用组件到其他的人，并将其设置成指令属性：

You can inject directly the parent component into a component without specifying it into component providers. To do that you need to use component into other ones and set it into the directives attribute:

@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() {
  }
}

什么是位样品中奇特的是，你没有定义组件选择和模板属性儿童和如GrandChild 。他们是真正的成分？

What is a bit strange in your sample is that you didn't define selector and template properties for components Child and GrandChild. Are they really components?

在您的样品，你以错误的方式做事情。如果你想从父组件获得子组件的情况下，你需要利用 @ViewChild 装饰通过注射从父一个中引用的子组件：

In your sample, you made things in the wrong way. If you want to get instances of child component from a parent component, you need to leverage the @ViewChild decorator to reference the child component from the parent one by injection:

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 。

Here is the updated plunkr: http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview.

您可以看到， @Query 参数装饰也可以使用：

You can notice that the @Query parameter decorator could also be used:

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

  (...)
}

您可以注意到你时，你有 @Component 一个不需要 @Injectable 装饰。 ..

You can notice that you don't need the @Injectable decorator when you have the @Component one...

这篇关于Angular2例外：无提供服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！