子コンポーネントで@inputプロパティを使用して角2でサービスを呼び出す

Question

角度2で@inputを使用して親コンポーネントから子コンポーネントにデータを通信します。目的は、値パラメータ@inputを使用して子コンポーネントでサービスを呼び出したいのですが、 valueプロパティは "undefine"です。これは私の子コンポーネントです：

import { Component, OnInit, EventEmitter, Input,Output } from  '@angular/core'; 

@Component({ 
    selector: 'app-child', 
    templateUrl: './child.component.html' 
}) 

export class ChildComponent implements OnInit { 


    @Input() productId: any; --> working perfectly if bind into html 

    constructor() { 

    } 

    ngOnInit(): void { 
     console.log(this.productId) --> undefine? 
    //in this methode i will call service to fetch another data from database using parameter productId.. 


    } 
} 

これを解決するには？

Answer 1

あなたはngOnChangesまたはngAfterViewInitのいずれかを使用する必要があります。

export class ChildComponent implements OnChanges { 
    // Subscribe to the change event and update the model 
    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
     let key = 'Data'; 
     this.productId = changes[key].currentValue; 
    } 
} 

Answer 2

@Input() 
set productId(value: any) { 
    console.log(value); 
} 

Answer 3

私はゲッターとセッターを使用し、セッターの内側に、あなたのサービスコールになるだろう。

// Declare a private underlying variable for the getter and setter 
private _productId: any; 
@Input() 
set productId(id: any){ 
    this._productId = id; 
    // Make your service call here 
} 
get productId(){ 
    return this._productId; 
}