Angolare 2. Passare il parametro a un componente

Question

Vorrei passare un parametro stringa al componente. A seconda del parametro che passa, passerò diversi parametri per i servizi nel mio componente. La prossima: In index.html chiama il mio componente, passando il parametro.

<top [mode]="tree">Loading...</top> 

Nel mio componente includo ingresso da angular2/core

import {Input, Component, OnInit} from 'angular2/core'; 

Nella mia classe component`s dichiaro un ingresso

@Input() mode: string; 

E con console.log() provo per prendere il mio parametro di passaggio di 'albero', ma è indefinito.

console.log(this, this.mode); 

Il codice completo di un file del componente:

import {Http, HTTP_PROVIDERS} from 'angular2/http'; 
import {Input, Component, OnInit} from 'angular2/core'; 
import {ParticipantService} from '../services/participant.service'; 
import {orderBy} from '../pipes/orderby.pipe'; 

@Component({ 
    selector: 'top', 
    templateUrl: 'dev/templates/top.html', 
    pipes: [orderBy], 
    providers: [HTTP_PROVIDERS, ParticipantService] 
}) 
export class AppTopComponent implements OnInit { 

    constructor (private _participantService: ParticipantService) {} 

    errorMessage: string; 
    participants: any[]; 
    @Input() mode: string; 

    ngOnInit() { 
     console.log(this, this.mode); 
     this.getParticipants('top3'); 
     var self = this; 
     setInterval(function() { 
      self.getParticipants('top3'); 
     }, 3000); 
    } 

    getParticipants(public mode: string) { 
     this._participantService.getParticipants(mode) 
      .then(
       participants => this.participants = participants, 
       error => this.errorMessage = <any>error 
      ); 
    } 

} 

Answer 1

Quando si utilizza [...], il valore che forniscono corrisponde a un'espressione che può essere valutata.

Quindi tree deve essere qualcosa che esiste nel componente padre e corrisponde a una stringa.

Se si desidera utilizzare la stringa tree, utilizzare questo:

<top mode="tree">Loading...</top> 

Si può notare che tali parametri non possono essere utilizzati per la componente principale. Vedere questa domanda per maggiori dettagli:

• Angular 2 input parameters on root directive

Answer 2

Come una soluzione per la limitazione Thierry spiegato è possibile utilizzare

constructor(private _participantService: ParticipantService, 
    elRef:ElementRef) { 
    this.mode=elRef.nativeElement.getAttribute('mode'); 
} 

Answer 3

è necessario attendere fino a che modello è destinato a DOM. per fare questo, è necessario implementare AfterViewInit

export class AppTopComponent implements AfterViewInit{ 

    public ngAfterViewInit() { 
     console.log(this, this.mode); 
     this.getParticipants('top3'); 
     var self = this; 
     setInterval(function() { 
      self.getParticipants('top3'); 
     }, 3000); 
    } 
    }