@Output從指令向父組件Angular 4發出值

Question

我有一些上傳指令，這很簡單，唯一的問題是我必須從這個指令組件向父組件發出值。 有人知道一個簡單的解決方案嗎？ 提前致謝。 這是我現在的指示：

上傳-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>

Answer 1

您可以使用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屬性，當事情發生時，它會使用該屬性發出事件。 父級綁定到該事件屬性並對這些事件做出反應。

Answer 2

在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
    }

有關詳細信息，請參閱此鏈接。