Question

Plunkr

我遇到了Angular @Input和inputs : ['']的问题。

问题是我有一个person对象。该对象包含id（person.id）。现在我需要在'父'页面的构造函数中初始化它:(注意：为plunkr简化，而不是实际代码但是同样的问题）。

import { Component } from '@angular/core';
import { Child } from './child.ts';

@Component({
  template: `
    <p>current id: {{person.id}}</p>
    <child-component [input_id]="person.id"></child-component>
  `,
  directives: [Child]
})
export class Parent {
  public person: any;

  constructor() {
    //not neccessary here but it is for production
        this.person = {id: -5, name: ''} 

        this.setPerson()
    }

    setPerson(){
      //just to fake a async method (production will be http.get)

      setTimeout(() => {
        this.person = {id: 3, name: 'test'}
      }, 500);
    }
}

我尝试将person.id发送到child-component，如下所示：

import { NavController } from 'ionic-angular/index';
import { Component, OnInit , Input} from "@angular/core";


@Component({
  selector: 'child-component',
  template: `
    <div>child:
      <p>Passed id: {{passed_id}}</p>
      <p>Some var: {{someVar}}</p>
    </div>
    `,
    inputs: ['passed_id']
})
export class Child implements OnInit {
  @Input passed_id: number;
  public someVar: number;

  constructor(private nav: NavController) {

    }

    ngOnInit(){
      //cant make into ngAfterViewChecked
      //because that executes too much and the call here
      //will be a heavy http call
      this.someVar = this.passed_id;
    }
}

这里的问题是：首先绑定将立即发生，将passed_id设置为-5。这也将someVar设置为-5。

我想等到passed_id更改为3（由Parent.setPerson()），然后进行重度异步（http）调用。

现在我知道我可以使用angular ngAfterViewChecked，但由于我正在使用不同类型的'标签'，因此执行很多，如果可能的话，我希望旋转器在{{1}时显示是-5直到它3. NgAfterViewChecked会多次执行，显示微调器很多次。

只是想知道是否有一种不同的解决方法，然后是passed_id

http://plnkr.co/edit/nJY29LMzUy0MjlDg2mjv?p=preview

Answer 1

您可以使用ngOnChanges()代替ngOnInit()

ngOnChanges(changes) {
  if(this.passed_id != -5) {
    this.http.get(...)
  }
}

您还可以将passed_id设为定位器

_passed_id:number;
@Input set passed_id(value:number) {
  this._passed_id = value;
  if(this.passed_id != -5) {
    this.http.get(...)
  } 
}

Angular 2 - @Input - 等待异步方法

1 个答案: