通过参考输入组件 [英] Component inputs by reference
问题描述
我正在编写一个angular2组件.在此组件中,我有3个输入.我将变量粘贴到每个输入.可以通过引用粘贴输入吗?
I'm writing an angular2 component. In this component i have 3 inputs. I paste a variable to each of the inputs. Is it possible to paste inputs by reference?
我希望能够将变量粘贴到组件上,并且一旦更改了它的值,我希望所做的更改将反映在该组件外部的变量上.这意味着通过引用传递变量.角度2可能吗?我知道我可以订阅活动.并触发事件更改.我想知道是否有一个更简单的解决方案.
I want to be able to paste variable to a component and once I change it's value, I want the change to be reflected on the variable outside of that component. Which means passing the variables by reference. Is it possible in angular 2? I know that I can subscribe to events. And fire an event apon change. I'm wondering if there is a simpler solution.
任何有关此问题的信息将不胜感激
Any information regarding the issue would be greatly appreciated
这是我创建的组件的代码.
this is the code for the component that I created.
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个输入.现在,我通过以下方式使用该组件:
as you can see I defined 3 inputs. now I use that component in the following way:
<image-upload [imageUrl]="imageUrl" [imageFile]="imageFile" [imageRotateDegrees]="imageRotateDegrees"></image-upload>
在这里,我将3个变量传递给组件.
here I'm passing 3 variables to the component.
,组件从输入定义中了解这些变量.
and the component understands those variables from the input definition.
现在..我想要的是能够更改组件内部的变量,并且将在组件外部进行更改.据我了解,变量是按值而不是按引用粘贴的.
now.. what I want is to be able to change the variables inside the component, and that they will be changed outside the component. as I understand the variables are pasted by value and not by reference.
那我该怎么办?
推荐答案
我知道这是几个月后的事,但是如果您仍然想做类似的事情,则可以使用"@ angular/core"中的ViewChild.ViewChild是父组件直接访问子变量/函数的一种方式,因此您可以在父组件中创建如下内容:
I realize this is a couple months later, but if you still want to do something like this you could use ViewChild from '@angular/core'. ViewChild is a way for the parent component to directly access child variables/functions, so you could create something like this in your parent component:
import [Component, ViewChild, AfterViewInit] from '@angular/core'
export class ParentComponent {
@ViewChild(ChildComponent) childComponent: ChildComponent
parentVariable
ngAfterViewInit() {
this.childComponent.childVariable = this.parentVariable
}
}
这篇关于通过参考输入组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!