web-dev-qa-db-ja.com

Angular 5パラメータを取るコンポーネント入力関数

Angular 2+コンポーネントでは、パラメータを取るコールバック関数をどのように渡すのですか？私の最初の仮定は次のようなものでした

<app-example [onComplete]="doThing('someParam')"></app-example>

そして時々、私はこのようなパラメータを必要としません：

<app-example [onComplete]="doSomeThingElse()"></app-example>

そして、私が持っているコンポーネントで

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input() public onComplete: () => void;

  //run `this.onComplete()` somewhere as needed
}

しかし、最終的には、doThing('someParam')またはdoSomeThingElse()が対話なしですぐに呼び出されます。

後で呼び出されるコンポーネントにコールバック関数を渡すにはどうすればよいですか？

編集：

ここで解決しようとしている実際の問題は、渡された関数を後で実行できるようにすることです。これは、ユーザーに「続行しますか？」と尋ねる確認コンポーネント用です。そして、「はい、わかります」ボタンを押すと、渡された関数が実行されます。

angulartypescriptangular5
11
CBarr

@toskvが探していた@Output構文の例は、 @Input として子コンポーネントにコールバック関数を渡す

あなたの例では、

<app-example 
  (onComplete)="doThing()" 
  [completedParam]="'someParam'"></app-example>

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Output() public onComplete: EventEmitter<any> = new EventEmitter();
  @Input() completedParam;

  runOnComplete(): void {
    this.onComplete.emit(this.completedParam);
  }
}

[onComplete]="doThing.bind(this, 'someParam')"ほど快適ではありません。

19
eric99

テンプレート：

<app-example [someParams]="someParamsObject"
             (complete)="onComplete($event)" >
</app-example>

成分：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input()
  someParams: YourParamsType;

  @Output()
  complete:EventEmitter<any> = new EventEmitter<any>();

  //run `this.complete(this.someParams)` somewhere as needed and 
  //pack in some params if you need
}

呼び出し元の親コンポーネントには、この場合onComplete型のパラメーターを受け取るanyという名前の関数が必要です（@Outputとして定義されているEventEmitter<any>から）。必要に応じて、EventEmitter<YourParticularType>のような特定のタイプのイベントパラメータを設定することもできます。

3
dee zg

このソリューションは、コンポーネント自体でアクションを実行せずに呼び出す必要があるメソッドがある場合にのみ機能します。ただし、私の場合、app-exampleコンポーネント内で監視可能なメソッドを実行し、そのコンポーネント内で何らかのアクションを実行するための応答を待つ必要があります。

誰かが同じ問題を抱えている場合。これがその解決策です。

  1. インターフェイスを作成します。

    export interface Delegate<T> {
  (...args: any[]): T;
}

  2. angularコンポーネントで、@Input変数を作成します

    @Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
})
export class AppExampleComponent {
  @Input() executeWhen: Delegate<Observable<any>>;

  runOnComplete(): void {
    this.executeWhen().subscribe(() => // do some action);
  }
}
2
Yhan

コンポーネントにプライベートメソッドを含めることができます。

private doThingFactory(param) {
  return () => this.doThing(param);
}

そして、そのように使用します：

<app-example [onComplete]="doThingFactory('someParam')"></app-example>
1
Sagi