Question

在我的主视图中我注入一个组件，在初始加载时显示正确的整数，但如果我稍后在主视图中更新该值，则附加到该函数的控制台日志消息显示正确的整数但实际html值不会更新。怎么回事？

main.js：

@Component({
    selector: 'step-one',
    directives: [priceBox],
    templateUrl: 'step-one/step-one.html'
})

export class stepOne {

    constructor(@Inject(Router) router, @Inject(Http) http, @Inject(RouteParams) params, @Inject(priceBox) pbox) {
        let cid = parseInt(params.get('country'));

        pbox.price = 200;

        ...

价格box.js

import {Component} from 'angular2/core';

@Component({
    selector: 'price-box',
    template: `
        <div>
            <h1>PRICEBOX</h1>
            <p>{{totalPrice}}</p>
        </div>
        `
})

export class priceBox {
    constructor() {
        this.totalPrice = '130';
    }

    set price(val){
        this.totalPrice = val;
        console.log('SET price box: price = ' + this.totalPrice);
    }
}

所以重申一下：在页面加载时，我的价格框元素显示价格为130 ...当我尝试通过pbox.price = 200 设置新值时，值保持在130 但是我得到了控制台日志消息说SET price box: price = 200

谢谢！

Answer 1

将子组件（function file_upload($upload_path , $allowed_types , $filename , $redirect) { $ci = & get_instance(); $config['upload_path'] = $upload_path; $config['allowed_types'] = $allowed_types; // $config['max_size'] = 1024;//1mb // $config['max_width'] = 1024; // $config['max_height'] = 1024; $ci->load->library('upload', $config); $data = NULL; if (!$ci->upload->do_upload($filename)) { error_log("within the file"); // $error = array('error' => $ci->upload->display_errors()); error_log($ci->upload->display_errors()); $ci->session->set_userdata('img_errors', $ci->upload->display_errors()); //error_log(print_r($ci->upload->display_errors(),true)); // redirect(base_url() . $redirect); } else { error_log("uploading"); $data = array('upload_data' => $ci->upload->data()); // do_resize($config['upload_path'] , $data['upload_data']['file_name']); } return $config['upload_path'] . $data['upload_data']['file_name']; }）注入父组件的方式有点奇怪。

如果要引用父组件中的组件，则应使用ViewChild装饰器：

priceBox

}

我还可以使用插值为priceBox组件提供价格。后者定义了一个输入参数：

@Component({
  selector: 'someDir',
  templateUrl: 'someTemplate',
  directives: [ItemDirective]
})
class stepOne {
  @ViewChild(ItemDirective) viewChild:priceBox;
  ngAfterViewInit() {
    // viewChild is set
  }

您可以在父组件中使用它：

@Component({
  selector: 'price-box',
  template: `
      <div>
          <h1>PRICEBOX</h1>
          <p>{{totalPrice}}</p>
      </div>
      `
})
export class priceBox {
  @Input('val') totalPrice = '130';
}

您可以注意到，您还可以利用自定义组件的双向绑定。您只需添加相应的事件：

@Component({
  selector: 'price-box',
  template: `
    <price-box [val]="price"></price-box>
  `
})
export class stepOne {
  price = '200';
}

现在在父组件中：

@Component({
  selector: 'price-box',
  template: `
      <div>
          <h1>PRICEBOX</h1>
          <p>{{totalPrice}}</p>
      </div>
      `
})
export class priceBox {
  @Input('val') totalPrice = '130';
  @Output('valChanged') totalPriceChanged:EventEmitter;

  constructor() {
    this.totalPriceChanged:EventEmitter = new EventEmitter();
  }

  updateTotalPrice() {
    this.totalPriceChanged.emit(this.totalPrice);
  }
}

希望它可以帮到你，亨利

组件模板表达式未更新

1 个答案: