角度2依賴注射（DI）只是不工作？

我的Angular2應用程序出現了一些（初學者？）問題。首先一個DI適用於一個組件，但不適用於另一個組件，而且我看不出任何問題。角度2依賴注射（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(); 
    } 

}

和雞尾酒。 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實例化的。我沒有得到任何錯誤，控制檯總是打印出'你好' - 即默認值。 @Input不會從其父節點（cocktail.component.ts）中獲取任何內容。

我還沒有包括所有的應用程序，因爲我覺得在這3個文件中有什麼不對勁。就像我說的那樣，DI在組件上工作，所以我知道DI工作正常，但是我看不到下面的代碼有什麼問題。

感謝很多的@input() params傳遞給組件之前

來源

2016-11-28 Nick Wilkins

是'的console.log（「成分JSON =」 ...'在所有正在執行的是這部分打印到控制檯（不'ingredient_json'） –

是啊，它只是？打印出'Ingredient JSON = hello' –

構造函數被調用。

在您的IngredientsComponent中實施方法ngOnChanges()並將您的console.log()移動到那裏。

詳情這裏：https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

來源

2016-11-28 18:12:41

嗯，有趣，但爲什麼組件工作正常呢？我只是傳遞靜態內容？ –

OK好吧，星級組件是一樣的。輸入（DI）項目在'施工'過程中不通過？ –

@Input（）params通過綁定傳遞 - 它不是DI。每次父級綁定（內存地址）更改時，都會調用ngOnChanges（）。 –

角度2依賴注射（DI）只是不工作？

回答

相關問題