モーダル - 閉じることができません。@Inputが外部コンポーネントと連携しています

Question

@Inputをコンポーネントで使用しようとしていますが、モーダルを開くときに変数を送信する方法を理解できません。

<template #modalContent> 
    <my-component-with-content [var1]="val1"></my-component-with-content> 
</template> 

そして、私は、モーダルを開くためにクリックしてください：たとえば、私は次のテンプレート持つ

<button type="button" (click)="open(modalContent)" class="btn btn-default">Open</button> 

を私はまた近い機能を持つ混乱しています。

私が試した：

<template #modalContent let-close='close'> 
    <my-component-with-content></my-component-with-content> 
</template> 

と私成分-と-コンテンツ（HTML）で、私は(click) = close("close")を呼び出すしようとすると、私は次のエラーを取得する：self.context.close機能

ではありません

オープンボタンをクリックしたときにvar1を渡す方法と、外部コンポーネントにclose関数を渡すにはどうすればよいですか？

編集：私はng-bootstrap modal

Answer 1

注意を使用しています、これはあなたがして、あなたのコンポーネントにあなたの近くに関数を渡すことができNG-ブートストラップalpha6、アンギュラ2.0.1に

を達成しました。

<template #modalContent let-c="close"> <my-component [var1]="val1" [close]="c"></my-component> </template>

これは、あなたがmodalContenにバインドされているclose関数を呼び出すことができますt。 var1に指定した入力バインディングは、親コンポーネントのval1という名前の変数から入力が設定されていることを示しています。したがって、リストされている最初のメソッドが機能するので、openで渡す必要はありません。

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

@Component({ 
selector: "my-component", 
template: "<h2>{{var1}}</h2>" + 
    "<button (click)='close()'>Close</button>" 
}) 
export class MyComponent { 
    @Input() 
    var1: string; 

    @Input() 
    close: Function; 
} 

そして、私の含有する成分宣言のパブリック val1: string = "some thing";

私はそれが押されたときに、モーダルテンプレートを閉じますその下のボタンでいくつかのことを表示開くためのボタンをクリックします。