2016-09-23 3 views
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> 

и в моем-компонентной с-контента (HTML), когда я пытаюсь вызвать (click) = close("close") я получаю следующее сообщение об ошибке: self.context.close не является функцией

Так что мой вопрос в том, как я могу передать var1, когда я нажимаю кнопку «Открыть», и как передать функцию close внешнему компоненту?

Редактировать: Я использую ng-bootstrap modal

ответ

1

Примечание, это было достигнуто в угловых 2.0.1, нг-самозагрузки alpha6

Вы можете передать близкую функцию в компонент с:

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

Это позволяет вызвать тесную функцию, которая привязывается к modalConten т. Связывание ввода, которое вы указали для 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";

При нажатии на кнопку, чтобы открыть показывает некоторые вещи с кнопкой, под которой будет закрыть шаблон модальный при нажатии.