Question

我将daterangepicker作为JS库（https://bootstrap-datepicker.readthedocs.io/en/latest/）的包装的Angular Component。我的问题是，我不知道如何将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 Instance（您需要将其导入）

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

当您拥有

时，在回调中的下一个

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

您需要使用：

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

使用组件时，您需要向其传递回调属性

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

之后，当您在datepicker中选择日期时，将调用回调方法

角度：如何从不同模板的输入为特定组件中的变量赋值

1 个答案: