在ngOnInit中使用@Input

Question

我已經使用@Input將應用程序object從父組件傳遞到子組件。 現在，我嘗試在子組件的ngOnInit上使用它。 該對象僅在ngOnChanges上ngOnChanges ，因此不能在ngOnInit使用。 我仍然嘗試了以下類似方法，但無法使其正常工作。

零件

@Input() app;
appModified;

listDetails() {
    this.appService.getDetails(this.appModified);
}

ngOnChanges() {
    console.log(this.app)
    this.appModified = this.app;
}

ngOnInit() {
    this.listDetails();
}

listDetails是undefined 。

我嘗試了這種方法，但仍然無法解決。

任何幫助表示贊賞。 謝謝

Answer 1

@surazzarus

確保您的html模板類似於下面的模板，其中someString內容將實例綁定到孩子的name屬性：

<hello [name]="someString"></hello>

在我的app.component中聲明someString變量，如下所示：

someString: string = '123 123 123';

最后一段代碼：

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

@Component({
  selector: 'hello',
  template: `<span>{{name}}</span>`
})
export class HelloComponent  {
  @Input() name: string;

  ngOnInit() {
    console.log(this.name);
}

  ngOnChanges() {
    console.log(this.name)
}
}

希望對你有幫助

在這里檢查整個樣本