Góc 2. Truyền tham số cho một thành phần

Question

Tôi muốn chuyển một tham số chuỗi cho thành phần của mình. Tùy thuộc vào tham số truyền đi, tôi sẽ chuyển các tham số khác nhau cho các dịch vụ trong thành phần của tôi. Tôi làm tiếp theo: Trong index.html gọi thành phần của tôi, truyền tham số.

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

Trong thành phần của tôi bao gồm đầu vào từ angular2/lõi

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

Trong lớp component`s của tôi tuyên bố một đầu vào

@Input() mode: string; 

Và với console.log() tôi cố gắng để bắt thông số của tôi về 'cây', nhưng nó không được xác định.

console.log(this, this.mode); 

Mã đầy đủ của một tập tin thành phần:

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

Khi bạn sử dụng [...], giá trị bạn cung cấp tương ứng với một biểu thức có thể được đánh giá.

Vì vậy, tree phải là nội dung tồn tại trong thành phần chính và tương ứng với chuỗi.

Nếu bạn muốn sử dụng chuỗi tree, sử dụng này:

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

Bạn có thể nhận thấy rằng thông số như vậy không thể được sử dụng cho phần gốc. Xem câu hỏi này để biết thêm chi tiết:

• Angular 2 input parameters on root directive

Answer 2

Là một workaround cho giới hạn Thierry giải thích bạn có thể sử dụng

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

Answer 3

bạn cần phải chờ đợi cho đến khi mẫu được ràng buộc để DOM. để thực hiện việc này, bạn phải triển khai 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); 
    } 
    }