Angular: Как присвоить значение переменной в конкретном компоненте из ввода другого шаблона

Question

Я делаю daterangepicker как угловой компонент, который является оболочкой библиотеки JS (https://bootstrap -datepicker.readthedocs.io / en / latest / ). Моя проблема в том, что я не знаю, как передать значение, которое находится на входе datepicker, в переменную, которая находится в другом компоненте (где я хочу использовать мой daterangepicker). Вот как я сделал компонент daterangepicker:

import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
import 'bootstrap-datepicker';
declare var $;


@Component({
    selector: 'cb-daterangepicker',
    templateUrl: './daterangepicker.component.html',
    styleUrls: ['./daterangepicker.component.scss']
})
export class DaterangepickerComponent implements OnInit, AfterViewInit {

    @Input()
    datepickerOptions: DatepickerOptions;

    constructor() { }

    ngOnInit() { }

    ngAfterViewInit(): void {

        $('.input-daterange').datepicker(this.datepickerOptions).on('changeDate', function() {
            var startDate =$('#start').datepicker('getDate');
            var endDate= $('#end').datepicker('getDate');
            console.log(startDate + " to " + endDate);
        });
    }
}

И шаблон выглядит так:

<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" id="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" id="end" />
</div>

Возможно, я сделал что-то не так, но console.log возвращает мне правильные значения, поэтому я считаю, что эти две вещи хороши.

Чего я хочу достичь: В другом компоненте - позвольте мне назвать его «exampleComponent», у меня есть две переменные: startDate и endDate, мне нужно передавать значения, которые я выбрал в daterangepicker, этим переменным каждый раз, когда я изменяю значение. Что я должен делать?

Answer 1

Вы должны использовать декоратор @Output,

Сначала создайте новое свойство в классе DaterangepickerComponent, пометьте его как @Output и присвойте ему экземпляр EventEmitter (его необходимо импортировать)

@Output dateOutput = new EventEmitter<Object>();

Следующий в вашем обратном вызове, когда у вас есть

console.log(startDate + " to " + endDate);

Вам необходимо использовать:

this.dateOutput.emit({startDate, endDate});

Когда вы используете свой компонент, вам нужно передать ему атрибут обратного вызова

<cb-daterangepicker dateOutput="callback($event)"> 

после этого при выборе даты в datepicker будет вызываться метод обратного вызова