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);
    }
}

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

我没有包含所有应用程序，因为我觉得这些3个文件中有些不对劲。就像我说的那样，DI在组件上工作，所以我知道DI工作，但我在下面的代码中看不到什么错误。

非常感谢

Answer 1

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

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

详细信息：https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

Angular 2依赖注射（DI）无法正常工作？

1 个答案: