Communication between angular components 2

Asked

Viewed 831 times

0

I have the following code in a component:

import {Component, ElementRef, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'datepicker',
    templateUrl: './frontend/components/datepicker/datepicker.html',
    styleUrls: ['./frontend/components/datepicker/datepicker.css'],
    directives: [FORM_DIRECTIVES]
})

export class Datepicker {
    public date : Date;
    public callback : Function;

    constructor() {
        $('.datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            showOn: 'button',
            buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                /*
                console.log($(this).parent());
                console.log(callback + '(' + selectedDate + ');');
                //eval(callback + '(' + selectedDate + ');');
                */
                console.log(this.callback);
                //this.callback(selectedDate);
            }
        });
    }

    setCallback(fn : Function){
        this.callback = fn;
    }
}

And in the component:

import {Component, NgIf, FORM_DIRECTIVES, ElementRef} from 'angular2/angular2';
import {Datepicker} from '../datepicker/datepicker';

declare function initMaterial();

@Component({
    selector: 'modal',
    directives: [NgIf, Datepicker, FORM_DIRECTIVES],
    templateUrl: './frontend/components/modal/modal.html',
    styleUrls: ['./frontend/components/modal/modal.css'],
    bindings: [Datepicker]
})

export class Modal {
    public isOpen : boolean = false;
    private dtCompromise : Date;
    private dsCompromise : String;
    private datepicker : Datepicker;

    constructor(datepicker : Datepicker){
        this.datepicker = datepicker;
        this.datepicker.setCallback(function(selectedDate : Date){
            console.log('Date: ' + selectedDate);
        });
    }

    selectDate(date : Date) {
        console.log('Data selecionada: ' + date);
    }
}

When selecting a date in the datepicker the callback method should be invoked in the first component. But when I use the.log console to view the content of the method, Undefined appears.

What could I have done wrong?

angular

  • you have also worked with Angular2 ?

  • @Rod have yes..

1 answer

0


Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.