Угловой 2. Передача параметра компоненту

Question

Я хотел бы передать параметр строки моему компоненту. В зависимости от параметра передачи я передам разные параметры для сервисов в моем компоненте. Я делаю следующее: В index.html вызовите мой компонент, передавая параметр.

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

В моем компоненте я включать вход от angular2/ядра

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

В моем классе component`s я объявляю вход

@Input() mode: string; 

И с console.log() я попробовать чтобы поймать мой передающий параметр «дерева», но он не определен.

console.log(this, this.mode); 

Полный код компонента файла:

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

При использовании [...], значение вы предоставляете соответствует выражение, которое может быть оценено.

Таким образом, tree должно быть чем-то, что существует в родительском компоненте и соответствует строке.

Если вы хотите использовать строку tree, используйте:

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

Вы можете заметить, что такие параметры не могут быть использованы для корневого компонента. Смотрите этот вопрос для более подробной информации:

• Angular 2 input parameters on root directive

Answer 2

В качестве временного решения для ограничения Thierry объяснил вы можете использовать

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

Answer 3

вы должны ждать, пока шаблон не будет привязан к DOM. для этого вам необходимо реализовать 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); 
    } 
    }