Question

我有一个包含离子离子搜索栏的组件。 ecHeaderInput 是@input。我可以将任意数量的方法（ionInputMethod，ionCancelMethod，ionClearMethod，keyupEnterMethod）传递给 searchProps ，但我不希望每次使用该组件时都传递所有方法（因为我可能不需要全部）。如果我没有通过所有方法，我会收到错误。如何告诉模板方法是可选的，或者只定义 ecHeaderInput.searchProps 中存在的方法？

<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

您可以尝试如下所示。

属性绑定：

注意：为清楚起见，我只获得了一个属性：

parent.html

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

您可以使用（?）运算符，如下所示。

child.ts

export class IonSearchbarComponent {

    @Input() placeholder?: string;

    constructor() { }

}

然后你也可以这样使用：

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

<强>方法：

实际上，您不需要提供所有方法。您可以在official doc here上看到。

e.g。

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

Answer 2

等等，如果一个组件有一个@Output发射器但它的父节点没有使用它，那么你不应该得到一个错误，同样适用于@Input。但是，如果要将输入传递给尚未声明该输入的子组件，则会出错。如果您的组件有许多@Outputs可供选择，那么您可以

1-选择使用哪一个而不必为每一个定义一个功能

2-包裹目标组件以将其所有方法合并为一个

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

}

然后在整个应用程序中，您可以通过@Input arrayOfMethods

调用您的WrapComponent并在该特定时间传递您感兴趣的方法列表

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

如何告诉离子模板组件方法是可选的？

2 个答案: