Angular 4 - Aufruf einer übergeordneten Methode von einer untergeordneten Komponente funktioniert nicht

Question

Alle meine Ereignisemitter funktionieren bis auf eine ordnungsgemäß.

child.ts:

@Component({ 
    ... 
    outputs: ['fileUploaded'] 
    }) 

export class childComponent implements OnInit { 
    ... 
    fileUploaded = new EventEmitter<boolean>(); 
    ... 
    randomMethod(){ 
    ... 
    this.fileUploaded.emit(true); 
    } 

} 

randomMethod() wird von der übergeordneten Komponente genannt, wie ich in parent.ts zeigen würde. Es wird nicht in child.html aufgerufen.

Parent.html

... 
<child (fileUploaded)="onSubmit($event)"></child> 
.. 

parent.ts

export class parentComponent { 
    ... 
    theChild = new childComponent; 
    submitted = false; 
    ... 
    onSubmit(event: boolean) { 
    console.log('in onSubmit()'); 
    this.submitted = event; 
    } 

    functionCallsChild(){ 
    this.theChild.randomMethod(); 
    ... 
    this.theChild = new childComponent; 
    } 
} 

Meine App meldet sich nie "in onSubmit()" warum also nicht aufgerufen diese Methode wird? Ich habe auch versucht, kein neues Kind-Objekt in meiner letzten Zeile zu erstellen, aber das hat keinen Unterschied gemacht.

Answer 1

Ihre Auswahl der untergeordneten Komponente falsch ist, sollten Sie ViewChild wie diese verwendet werden:

Eltern.html:

<child #theChild (fileUploaded)="onSubmit($event)"></child> 

parent.ts:

export class parentComponent { 
    ... 
    @ViewChild('theChild') theChild; 
    submitted = false; 
    ... 
    onSubmit(event: boolean) { 
    console.log('in onSubmit()'); 
    this.submitted = event; 
    } 

    functionCallsChild(){ 
    this.theChild.randomMethod(); 
    ... 
    } 
} 

Answer 2

Versuchen Sie es so:

@Output() 
    fileUploaded = new EventEmitter<boolean>(); 

Und entfernen:

outputs: ['fileUploaded'] 

prüfen Dokumentation here! : D

Answer 3

Sie sollten keine untergeordnete Komponente erstellen, verwenden Sie einen neuen Operator.

Sie sollten @ViewChild() verwenden, um untergeordnete Komponente zu referenzieren.

Answer 4

Vielleicht habe ich nicht klar, warum Sie diesen Ansatz wählen oder wofür Sie ihn brauchen, aber soweit ich weiß, sollten Sie die EventEmitter vom Kind bis zu seinem Elternteil verwenden. Das bedeutet, dass das Ereignis, das .emit() ausgelöst wird, in der child.html platziert werden soll. Versuchen Sie, wie dies tun, und es sollte funktionieren:

child.html

<div (click-or-whatever-fires-what-you-want)="randomMethod()"></div> 

child.ts:

@Component({ 
    ... 
    }) 

export class childComponent implements OnInit { 
    ... 
    @Output() fileUploaded = new EventEmitter<boolean>(); 
    ... 
    randomMethod(){ 
    ... 
    this.fileUploaded.emit(true); 
    } 

} 

Parent.html

... 
<child (fileUploaded)="onSubmit($event)"></child> 
.. 

parent.ts

export class parentComponent { 
    ... 
    submitted = false; 
    ... 
    onSubmit(event: boolean) { 
    console.log('in onSubmit()'); 
    this.submitted = event; 
    } 
} 

Hoffe, dass es hilfreich war.

Answer 5

Sie können die Methode der übergeordneten Komponente aus der untergeordneten Komponente aufrufen, indem Sie den @Output Emitter verwendet, die auf untergeordnete Komponente auf jeden Fall ausgelöst. Ich habe diesen Ansatz im Kommentarbereich verwendet, um die Anzahl in der Elternkomponente mit der Methode der Kindkomponente zu aktualisieren.

Parent.ts

/** Update the count from child component */ 
UpdateCount(id) { 
this.getTotalCommentCountByGroupId(id); 
} 

Parent.html

<srv-group-feed [LiveFeedInput]="groupPostRes" 
(CommentCount)="UpdateCount($event)"></srv-group-feed> 

Child.ts

this.CommentCount.emit(data you need to pass); 

und global können Sie @Output Ereignis in der Kinderkomponente dh child.ts erklären

@Output() CommentCount = new EventEmitter<string>();