[英]@Output emit value from directive to parent component Angular 4
我有一些上传指令,这很简单,唯一的问题是我必须从这个指令组件向父组件发出值。 有人知道一个简单的解决方案吗? 提前致谢。 这是我现在的指示:
上传-field.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
@Component({
selector: 'app-upload-field',
templateUrl: './upload-field.component.html',
styleUrls: ['./upload-field.component.scss']
})
export class UploadFieldComponent implements OnInit {
@Input() labelName: string;
@Input() placeHolderValue: string;
value = '';
constructor() { }
ngOnInit() {
}
uploadButton(event: any) {
this.value += event.target.value;
this.value = this.value.replace(/^.*\\/, '');
}
}
上载field.component.html
<input placeholder="{{placeHolderValue}}" disabled="disabled" class="form-control first-input" value="{{value}}" />
<div class="file-upload">
<span class="btn btn-default btn-lg">{{labelName}}</span>
<input type="file" class="form-control upload-button" (change)="uploadButton($event)" value="{{value}}" />
</div>
我这样使用它:
<app-upload-field [labelName]="'Blader'" [placeHolderValue]="'Kies bestand'"></app-upload-field>
您可以使用EventEmitter
。
参考: Parent侦听子事件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
//...your decorator properties
})
export class UploadFieldComponent {
@Output() onValueChanged = new EventEmitter<any>();
uploadButton() {
this.value += event.target.value;
this.value = this.value.replace(/^.*\\/, '');
this.onValueChanged.emit(this.value);
}
}
在父组件中,模板:
<app-upload-field [labelName]="'Blader'" [placeHolderValue]="'Kies bestand'"
(onValueChanged)=onValueChanged($event)>
</app-upload-field>
在组件代码中,
onValueChanged(value) {
// value will be the emitted value by the child
}
子组件公开一个
EventEmitter
属性,当事情发生时,它会使用该属性发出事件。 父级绑定到该事件属性并对这些事件做出反应。
在UploadFieldComponent中
export class UploadFieldComponent implements OnInit {
...
@Output myValueChanged = new EventEmitter<string>();//passing a string value to parent
...
uploadButton(event: any) {
...
myValueChanged.emit(valueToBePassed);
}
}
用法
<app-upload-field [labelName]="'Blader'" (myValueChanged)="parentEvent($event)" [placeHolderValue]="'Kies bestand'"></app-upload-field>
在父组件中
parentEvent(data:string){
// do something with data
}
有关详细信息,请参阅此链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.