[英]Angular 2 dependancy injection (DI) just not working?
I'm got a couple of (beginner?) problems with my Angular2 app. 我的Angular2应用有几个(入门级)问题。 Firstly a DI works for one component, but not another, and I cant see any problem.
首先,DI适用于一个组件,但不适用于另一个组件,我看不到任何问题。
I've got a cocktail component that includes a starring functionality, and a list of ingredients. 我有一个鸡尾酒组件,其中包括一个具有星标的功能和一系列配料。 All code below is stripped down, and it all runs fine (no console errors) - I'm just not getting the desired output
下面的所有代码都被精简了,并且一切正常(没有控制台错误)-我只是没有得到想要的输出
Heres the cocktail.component.ts: 这是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();
}
}
And the cocktail.template.html.... 还有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>
The star component is getting passed isStarred and numLikes properly - all good. 正确传递了star组件isStarred和numLikes-一切都很好。
Now in the ingredient component: 现在在成分部分中:
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);
}
}
The problem I've stated in comments. 我在评论中提到的问题。 The ingredient_json variable just isn't instantiated from the @Input.
没有从@Input实例化Ingredient_json变量。 I'm not getting any errors, the console just always prints out 'Hello' - ie the default.
我没有收到任何错误,控制台始终会打印出“ Hello”-即默认值。 The @Input isn't grabbing anything from its parent (cocktail.component.ts).
@Input不会从其父(cocktail.component.ts)抓取任何东西。
I havent included all the app, as I feel as though something is amiss in these 3 files. 我还没有包含所有应用程序,因为我感觉这3个文件中似乎有什么不对劲。 Like I said, the DI works on the component, so I know that the DI works, but I can't see whats wrong in my code below.
就像我说的那样,DI在组件上起作用,所以我知道DI可以工作,但是我看不到下面的代码有什么问题。
Thanks a lot 非常感谢
Constructor is invoked before the @input() params
are passed to a component. 在将
@input() params
传递给组件之前,调用构造函数。
Implement the method ngOnChanges()
in your IngredientsComponent
and move your console.log()
there. 在
IngredientsComponent
实现方法ngOnChanges()
,然后将console.log()
移动到那里。
Details here: https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html 此处的详细信息: https : //angular.io/docs/ts/latest/api/core/index/OnChanges-class.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.