Wie kann ich ionischen Templates mitteilen, dass die Methoden der Komponenten optional sind?

Question

Ich habe eine Komponente, die ionensuchbar ion enthält. ecHeaderInput ist ein @ Eingang. Ich kann in searchProps eine beliebige Anzahl von Methoden (ionInputMethod, ionCancelMethod, ionClearMethod, keyupEnterMethod) übergeben, aber ich möchte nicht alle Methoden jedes Mal übergeben, wenn ich die Komponente verwenden (da ich nicht alle benötigen). Wenn ich nicht alle Methoden bestehen, erhalte ich einen Fehler. Wie kann ich der Vorlage mitteilen, dass die Methoden optional sind, oder nur die Methode definieren, wenn sie in ecHeaderInput.searchProps existiert?

<ion-searchbar *ngIf="ecHeaderInput.showSearch" 
[placeholder]="ecHeaderInput.searchProps.placeholder"[(ngModel)]="_searchTerm" 
[showCancelButton]="ecHeaderInput.searchProps.showCancelButton" 
(ionInput)="ecHeaderInput.searchProps.ionInputMethod(_searchTerm) 
ecHeaderInput.searchProps.ionInputMethod(_searchTerm)" 
(ionCancel)="ecHeaderInput.searchProps.ionCancelMethod(_searchTerm)" 
(ionClear)="ecHeaderInput.searchProps.ionClearMethod(_searchTerm)" 
(keyup.enter)="ecHeaderInput.searchProps.keyupEnterMethod(_searchTerm)"> </ion- 
searchbar> 

Answer 1

Sie können versuchen, wie unten gezeigt.

Property Bindungen:

Hinweis: Aus Gründen der Klarheit, erhalte ich nur eine Eigenschaft:

Parent.html

<ion-searchbar *ngIf="ecHeaderInput.showSearch" 
[placeholder]="ecHeaderInput.searchProps.placeholder"[(ngModel)]="_searchTerm"> 
</ion-searchbar> 

Sie können die (?) Operator wie nachstehend.

child.ts

export class IonSearchbarComponent { 

    @Input() placeholder?: string; 

    constructor() { } 

} 

Dann können Sie wie folgt verwenden:

<ion-searchbar *ngIf="ecHeaderInput.showSearch" [(ngModel)]="_searchTerm"> 
</ion-searchbar> 

Methoden: Eigentlich

, brauchen Sie nicht alle Methoden zu geben, . Sie können das auf official doc here sehen.

z.B.

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 

Answer 2

warten, sollten Sie nicht einen Fehler, wenn eine Komponente einen @Output Emitter, aber seine Eltern hat, wird es nicht verwenden und gleiche gilt für @Input. Sie erhalten jedoch einen Fehler, wenn Sie eine Eingabe an eine untergeordnete Komponente übergeben, die diese Eingabe nicht deklariert hat. Wenn Ihre Komponente viele @Outputs zur Auswahl hat dann können Sie entweder

1- Wählen Sie eines, das ohne zu verwenden, die eine Funktion für jeden von ihnen

2- Wickeln Sie Ihre Zielkomponente zu definieren, fusionieren, alle ihre Methoden in einem

import { Component, Output, Input } from '@angular/core'; 

@Component({ 
    selector: 'wrap-component', 
    template : `<ion-searchbar 
       (ionInput)="method1($event)" 
       (ionCancel)="method2($event)" 
       (etc)="etcetc($event)" 
       ></ion-searchbar>` 
}) 
export class WrapComponent{ 
    @Input() arrayOfMethods:string[]; 
    @Output() mergeFunctionEmitter = new EventEmitter<any>(); 
    constructor(){} 

    method1(someEvent){ 
     if(this.arrayOfMethods.indexOf('mehod1') > -1){ 
     this.mergeFunctionEmitter.emit(
      { 
       method:"method1", 
       data : someEvent 
      } 
     ); 
     } 
    } 
    method2(someEvent){ 
     if(this.arrayOfMethods.indexOf('mehod2') > -1){ 
     this.mergeFunctionEmitter.emit(
      { 
       method:"method2", 
       data : someEvent 
      } 
     ); 
     } 
    } 
    //etc etc as many methods as there are outputs 

} 

dann in Ihrer App können Sie Ihre WrapComponent aufrufen und eine Liste der Methoden, die Sie daran interessiert sind, zu diesem bestimmten Zeitpunkt durch die arrayOfMethods @Input passieren

<wrap-component 
    [arrayOfMethods]="['method1','method2']" 
    (onSomethingHasHappened)="mergeFunctionEmitter($event)"> 
</wrap-component>