更新

Question

我正在写一个angular2组件。在这个组件中我有3个输入。我将变量粘贴到每个输入。是否可以通过引用粘贴输入？

我希望能够将变量粘贴到组件上，一旦我更改了它的值，我希望将更改反映在该组件之外的变量上。这意味着通过引用传递变量。有角度2可能吗？我知道我可以订阅活动。然后发生事件变化。我想知道是否有更简单的解决方案。

非常感谢有关此问题的任何信息

更新

这是我创建的组件的代码。

import { Component } from '@angular/core';
import {MdButton} from '@angular2-material/button';
import {ImageRotation} from './image-rotation';
import {FileReaderEvent} from './file-reader-event';
@Component({
selector: 'image-upload',
templateUrl: '/client/imports/components/image-upload/image-upload.html',
directives: [MdButton],
inputs: ['imageUrl','imageFile','imageRotateDegrees']
})
export class ImageUploadComponent {
imageRotationObj:ImageRotation;
imageUrl:string;
imageSrc:any;
imageFile: any;
imageRotateDegrees:number;
imageExifRotation:number;
isImageFileExif:boolean;

imageChanged() {
    var reader = new FileReader();
    reader.onload =  (e:FileReaderEvent)=> {
        var exif = EXIF.readFromBinaryFile(e.target.result);
        switch (exif.Orientation) {
            case 8:
                    this.imageRotateDegrees=-90;
                    this.imageExifRotation=-90;
                    this.isImageFileExif=true;
                this.imageRotationObj.setImageRotation(-90);
                break;
            case 3:
                    this.imageRotateDegrees=180;
                    this.imageExifRotation=180;
                    this.isImageFileExif=true;
                this.imageRotationObj.setImageRotation(180);
                break;
            case 6:
                    this.isImageFileExif=true;
                    this.imageExifRotation=90;
                    this.imageRotateDegrees=90;
                this.imageRotationObj.setImageRotation(90);
                break;
            default:
                    this.isImageFileExif=false;
        }
    };
    var reader2 = new FileReader();
    reader2.onload = (e:FileReaderEvent)=> {
        this.imageSrc=e.target.result;
    }
    reader.readAsArrayBuffer(this.imageFile);
    reader2.readAsDataURL(this.imageFile);
}

constructor() {
    this.imageRotationObj=new ImageRotation();
 }

fileOnChange(event:any) {
    this.imageFile = event.target.files[0];
    this.imageChanged();
}
}

你可以看到我定义了3个输入。现在我以下列方式使用该组件：

<image-upload [imageUrl]="imageUrl" [imageFile]="imageFile" [imageRotateDegrees]="imageRotateDegrees"></image-upload>

这里我将3个变量传递给组件。

并且组件从输入定义中理解这些变量。

现在..我想要的是能够更改组件内部的变量，并且它们将在组件外部进行更改。据我所知，变量是按值而不是通过引用粘贴的。

那我该怎么办？

Answer 1

我意识到这是几个月之后，但如果您仍想做这样的事情，可以使用'@ angular / core'中的ViewChild。 ViewChild是父组件直接访问子变量/函数的一种方式，因此您可以在父组件中创建这样的内容：

exports.makeRequest = function makeRequest(url, cb) {
    request({
      url: url,
      auth: {
        user: '*****',
        pass: '*****'
      },
      rejectUnauthorized: false,
    }, function(error, response, body) {
      if (error) {
        return cb(er);
      }
      if (response.statusCode !== 200) {
        return cb(new Error('Request failed with code ' + response.statusCode));
      }
      cb(null, body.toString());
    });
  }
  //usage
var myRequests = require('./Request');

myRequests.makeRequest(url, function(er, html) {
  if (er) {
    return console.log(er);
  }
  console.log(html);
});

Answer 2

我不完全确定，但不是双向数据绑定你正在寻找什么？

请看这里：https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

组件通过引用输入

更新

2 个答案: