[英]@Output emit value from directive to parent component Angular 4
I have some upload directive, that is very simple, only problem is that i have to emit value from this directive component to parent component. 我有一些上传指令,这很简单,唯一的问题是我必须从这个指令组件向父组件发出值。 Does anybody know a simple solution?
有人知道一个简单的解决方案吗? Thanks in advance.
提前致谢。 This is my directive for now:
这是我现在的指示:
upload-field.component.ts 上传-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(/^.*\\/, '');
}
}
upload-field.component.html 上载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>
And I use it like this: 我这样使用它:
<app-upload-field [labelName]="'Blader'" [placeHolderValue]="'Kies bestand'"></app-upload-field>
You can use EventEmitter
for this. 您可以使用
EventEmitter
。
Reference: Parent listens for child event 参考: 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);
}
}
In parent component, Template: 在父组件中,模板:
<app-upload-field [labelName]="'Blader'" [placeHolderValue]="'Kies bestand'"
(onValueChanged)=onValueChanged($event)>
</app-upload-field>
Within component code, 在组件代码中,
onValueChanged(value) {
// value will be the emitted value by the child
}
The child component exposes an
EventEmitter
property with which it emits events when something happens.子组件公开一个
EventEmitter
属性,当事情发生时,它会使用该属性发出事件。 The parent binds to that event property and reacts to those events.父级绑定到该事件属性并对这些事件做出反应。
In UploadFieldComponent 在UploadFieldComponent中
export class UploadFieldComponent implements OnInit {
...
@Output myValueChanged = new EventEmitter<string>();//passing a string value to parent
...
uploadButton(event: any) {
...
myValueChanged.emit(valueToBePassed);
}
}
Usage 用法
<app-upload-field [labelName]="'Blader'" (myValueChanged)="parentEvent($event)" [placeHolderValue]="'Kies bestand'"></app-upload-field>
In parent component 在父组件中
parentEvent(data:string){
// do something with data
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.