Angular 2 依赖注入 (DI) 无法正常工作？

Question

我的 Angular2 应用程序有几个（初学者？）问题。首先，DI 适用于一个组件，但不适用于另一个组件，我看不出有任何问题。

我有一个鸡尾酒组件，其中包括一个星标功能和一个成分列表。下面的所有代码都被精简了，并且运行良好（没有控制台错误）——我只是没有得到想要的输出

这是cocktail.component.ts：

import { Component } from '@angular/core'
import { CocktailService } from './cocktail.service'
import { HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'cocktails',
    templateUrl: 'app/cocktail.template.html',
    providers: [CocktailService, HttpModule]
})
export class CocktailsComponent {
    title: string = "Sunday Brunch Specials";
    cocktails;
    isStarred = false;
    numLikes = 10;
    ingredient_json = "Bob"; // for testing

    constructor(private _cocktailService: CocktailService) {
        this.cocktails = _cocktailService.getCocktails();
    }

}

还有 cocktail.template.html.....

<h2>{{title}}</h2>
<input type="text" autoGrow />
   <ul>
        <li *ngFor="let cocktail of cocktails | async">
        <h3>{{cocktail.name}}</h3>
        <star [is-starred]="isStarred" [num-likes]="numLikes" (change)="onStarredChange($event)"></star>
        <ingredients [ingredient-json]="ingredient_json"></ingredients>
<li>

星组件正在正确传递 isStarred 和 numLikes - 一切都很好。

现在在配料组件中：

import {Component, Input} from '@angular/core';
import {IngredientService} from './ingredient.service';
@Component({
selector: 'ingredients',
template: '
        <h4>Ingredients</h4>
        <ul>
            <li *ngFor="let ingredient of ingredients">{{ingredient}}</li>
        </ul>'
)}
export class IngredientsComponent {
    @Input('ingredient-json') ingredient_json = "Hello";

    title: 'Ingredients';
    ingredients;

    constructor() {
        // Why isn't ingredient_json outputting anything but hello? Ie nothing is going into input
        console.log("Ingredient JSON = " + this.ingredient_json);
    }
}

我在评论中提到的问题。 ingredient_json 变量不是从@Input 实例化的。我没有收到任何错误，控制台总是打印出 'Hello' - 即默认值。 @Input 没有从其父项 (cocktail.component.ts) 获取任何内容。

我没有包含所有应用程序，因为我觉得这 3 个文件中似乎有问题。就像我说的，DI 在组件上工作，所以我知道 DI 工作，但我看不出下面的代码有什么问题。

非常感谢

Answer 1

在 @input() params 传递给组件之前调用构造函数。

在您的 IngredientsComponent 中实施方法 ngOnChanges() 并将您的 console.log() 移到那里。

详情在这里：https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

Angular 2 依赖注入 (DI) 无法正常工作？

Angular 2 dependancy injection (DI) just not working?

javascript

angular2-directives

angular