时间戳

首页 > 解决方案 > 有没有办法将 Bootstrap Datepicker 值从一个组件发送到另一个组件？

javascript - 有没有办法将 Bootstrap Datepicker 值从一个组件发送到另一个组件？

问题描述

我在我的 Angular 应用程序上使用 Bootrap，它是这样划分的

这是我的Datepicker.html文件

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>

这是我的Datepicker .ts 文件

import { Component, OnInit } from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent implements OnInit {
  model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar) {
  }
  selectToday() {
    this.model = this.calendar.getToday();
  }
  ngOnInit(): void {
  }

}

我的目标是从我的 datepicker 组件中获取选定的日期并将其发送到我的 dayoverview 组件

Dayoverview .ts

import { Component, OnInit } from '@angular/core';
import { ɵangular_packages_core_testing_testing_a } from '@angular/core/testing';
import { PATIENTS } from './dummypatientdata';
@Component({
  selector: 'app-dayoverview',
  templateUrl: './dayoverview.component.html',
  styleUrls: ['./dayoverview.component.css']
})
export class DayoverviewComponent implements OnInit {
patients = PATIENTS;
  constructor() { }

  ngOnInit(): void {
  }

}

Datepicker 是日期概览的子组件。

标签： javascriptangulartypescriptdatepickerangular-ui-bootstrap

解决方案

如果 Datepicker 是 Dayoverview 组件的子组件，则应在子组件中使用 EventEmitter 并绑定到父组件中的 EventEmitter。

可以在 Angular 文档中找到一个示例： https ://angular.io/guide/component-interaction#parent-listens-for-child-event

推荐阅读