时间戳

首页 > 解决方案 > Angular：如何从不同模板的输入为特定组件中的变量赋值

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

问题描述

我正在将 daterangepicker 作为 Angular 组件，它是 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 中选择的值传递给该变量。我想做什么？

标签： javascripthtmlcssangulardatepicker

解决方案

你必须使用@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 回调方法中选择日期时，将被调用

推荐阅读