iniettabili non funzionanti in angular 2.0 ultimo build 26

Question

Stavo passando all'applicazione demo angular2.0 ma sembra che gli iniettabili non funzionino da build 24 e mi danno errore come
"ERRORE ORIGINALE: Impossibile risolvere tutti i parametri per MyAppComponent. Assicurati che abbiano tutti un tipo o annotazioni validi. "
fino Build 23 il suo bel lavoro, please help me con l'emissione
di sotto è il codice demo, avevo fatto pochi manipolazioni dall'originale solo per l'apprendimento scopo

import {Component, View, bootstrap, NgFor} from 'angular2/angular2'; 


module foo{ 
    class FriendsService { 
    names: Array<string>; 
    constructor() { 
     this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana","Kai"]; 
    } 
} 


@Component({ 
    selector: 'array', 
    injecetables: [FriendsService] 

}) 
@View({ 
     template: '<p>My name: {{ myName }}</p><p>Friends:</p><ul><li *ng-for="#name of names">{{ name }}</li></ul>', 
     directives: [NgFor] 
}) 
    export class arrayComponent { 
    myName: string; 
    names: Array<string>; 

    constructor(friendsService: FriendsService) { 
     this.myName = 'Alice'; 
     this.names = friendsService.names; 
    } 
    } 
} 

bootstrap(foo.arrayComponent); 

Answer 1

La nuova sintassi per injectables è appInjector.

Prova:

@Component({ 
    selector: 'array', 
    appInjector: [FriendsService] 
}) 

Inoltre, si vuole cambiare le importazioni per le Component e View a:

import {ComponentAnnotation as Component, ViewAnnotation as View} from "angular2/angular2"; 

Answer 2

module foo{ class FriendsService {...

La classe FriendsService è definita all'interno di un modulo, che è un problema in due modi:

1. La classe deve essere esportato dal modulo per renderlo visibile al di fuori foo
2. Quando si fa riferimento FriendsSerivce non si specifica che è all'interno del modulo foo.

Suggerirei di rimuovere completamente il modulo foo e fare affidamento sui modelli di modulo in amd/commonjs. Ciò significa che non è necessario esportare la classe (supponendo che siano nello stesso file) e non è necessario modificare il riferimento alla classe nel componente.

Answer 3

Il tuo FriendsService è estratto in un modulo e non viene esportato, per cui arrayComponent non può accedervi e genera un errore.

Si dovrebbe semplicemente estrarre il modulo e avere foo essere dichiarato sopra arrayComponent nello stesso ambito.

Inoltre, il bootstrap alla fine è errato poiché arrayComponent non fa parte di foo. Basta avere essere

bootstrap(arrayComponent)

e dovrebbe andare bene.

Answer 4

Sembra che the currently latest angular2, alpha-35, sostituisca appInjector con bindings.

Ti piace questa:

import {FriendsService} from 'FriendsService'; 

@Component({ 
    selector: 'array', 
    bindings: [FriendsService] 
}) 

Ho anche dovuto esportare esplicitamente FriendsService:

export class FriendsService { 

Complete code example here

Answer 5

In angolare 2 c'è l'iniettore a livello di applicazione e poi ci sono la componente iniettori.

Se si desidera solo un'istanza di FriendsService in tutta l'intera applicazione, poi includerlo nella matrice bootstrap():

@Component({ 
    // providers: [FriendsService], 
    ... 

bootstrap(App, [FriendsService]) 

Se si preferisce avere un'istanza per componente, utilizzare la matrice providers nel oggetto di configurazione del componente invece:

@Component({ 
    providers: [FriendsService ], 
    ... 

bootstrap(App, []) 

Plunker

Vedere il documento Hierarchical Injectors per maggiori informazioni.