0

我正在尝试@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>

当我尝试调用时，在 my-component-with-content (html)(click) = close("close")中出现以下错误：self.context.close 不是函数

所以我的问题是当我单击打开按钮时如何传递 var1 以及如何将close函数传递给外部组件？

编辑：我正在使用ng-bootstrap 模式

4

1 回答 1

1

请注意，这是在 Angular 2.0.1 ng-bootstrap alpha6 中实现的

您可以通过以下方式将您的关闭功能传递到您的组件中：

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

这使您可以调用绑定到 modalContent 的 close 函数。您为 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;
}

在我的包含组件声明中，一个公共 val1: string = "some thing";

当我单击按钮打开时，它会显示一些带有按钮的东西，按下该按钮将关闭模态模板。

于 2016-09-23T20:47:07.513 回答