模态 - 无法关闭并且 @Input 与外部组件一起工作
Modal - Can't get close and @Input working with external component
我正在尝试将 @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
注意,这是在 Angular 2.0.1 中实现的,ng-bootstrap alpha6
您可以通过以下方式将您的关闭函数传递到您的组件中:
<template #modalContent let-c="close">
<my-component [var1]="val1" [close]="c"></my-component>
</template>
这让您可以调用绑定到 modalContent 的关闭函数。您为 var1 指定的输入绑定意味着您的输入是从父组件中名为 val1 的变量设置的,因此不需要在打开时传递,因为您列出的第一个方法应该有效。
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;
}
并且在我的包含组件声明中 public
val1: string = "some thing";
当我单击按钮打开它时,它会显示 一些东西,下面有一个按钮,当它被按下时会关闭模态模板。
我正在尝试将 @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
注意,这是在 Angular 2.0.1 中实现的,ng-bootstrap alpha6
您可以通过以下方式将您的关闭函数传递到您的组件中:
<template #modalContent let-c="close">
<my-component [var1]="val1" [close]="c"></my-component>
</template>
这让您可以调用绑定到 modalContent 的关闭函数。您为 var1 指定的输入绑定意味着您的输入是从父组件中名为 val1 的变量设置的,因此不需要在打开时传递,因为您列出的第一个方法应该有效。
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;
}
并且在我的包含组件声明中 public
val1: string = "some thing";
当我单击按钮打开它时,它会显示 一些东西,下面有一个按钮,当它被按下时会关闭模态模板。