☰

Angularは、AngularJSの方法と同様に、@Inputとして子コンポーネントにコールバック関数を渡します。質問する

tag-icon • tag-icon angularjs angular typescript
Angularは、AngularJSの方法と同様に、@Inputとして子コンポーネントにコールバック関数を渡します。質問する

AngularJSには、コールバックをディレクティブに渡すことができる&パラメータがあります（例：AngularJSのコールバックの方法コールバックを Angular コンポーネント (以下のようなもの) として渡すことは可能ですか@Input? そうでない場合、AngularJS の機能に最も近いものは何でしょうか?

@Component({
    selector: 'suggestion-menu',
    providers: [SuggestService],
    template: `
    <div (mousedown)="suggestionWasClicked(suggestion)">
    </div>`,
    changeDetection: ChangeDetectionStrategy.Default
})
export class SuggestionMenuComponent {
    @Input() callback: Function;

    suggestionWasClicked(clickedEntry: SomeModel): void {
        this.callback(clickedEntry, this.query);
    }
}


<suggestion-menu callback="insertSuggestion">
</suggestion-menu>

ベストアンサー1

それは悪い解決策だと思います。 を使って関数をコンポーネントに渡したい場合は@Input()、@Output()デコレータが必要です。

export class SuggestionMenuComponent {
    @Output() onSuggest: EventEmitter<any> = new EventEmitter();

    suggestionWasClicked(clickedEntry: SomeModel): void {
        this.onSuggest.emit([clickedEntry, this.query]);
    }
}

<suggestion-menu (onSuggest)="insertSuggestion($event[0],$event[1])">
</suggestion-menu>

おすすめ記事