在子組件中使用@input屬性調用Angular 2中的服務

Question

使用角度2中的@input從父組件到子組件的通信數據。我的目的是我想使用值參數@input調用子組件中的服務，但value屬性為“ undfine”。 這是我的孩子部分：

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

我會使用一個吸氣劑和一個塞特，在塞特內部，您將撥打服務電話。

// 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;
}

Answer 2

您需要使用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 3

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