0

我正在尝试使用 bootstrap ngbdatepicker 我将 datepicker 选择器添加到 appcomponent.html 并且 datepicker 开始在那里显示 现在我需要将该模型值读入控制器，以便我可以将它传递给父 appcomponent 我在 datepicker 上添加（更改）方法但它是从输入中删除该方法，以便我如何读取该值并将其传递给父级。是否有任何其他选项可以在控制器中读取该值并传递给父级

提前致谢

下面是我在这里使用子选择器打开日期选择器的模板我添加了更改方法，但它没有触发日期选择，所以我无法发出事件

父组件：

<ng-template #modalContent let-close="close" *ngIf="true">
  <div class="modal-header">
    <h5 class="modal-title">Add new event</h5>
    <button type="button" class="close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
  <label>Start Date</label><date-pick (change)="updateFromChild($event)"></date-pick>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
  </div>
</ng-template>


Child Component:

import {Component, Input, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'date-pick',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  model;
  constructor(){  }
  @Output() change: EventEmitter<any> = new EventEmitter<any>();
  onChange() {
      console.log('call');
      this.change.emit(this.model)
  }
}
Child Template:

<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" (change)="onChange()">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
          <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
        </button>
      </div>
    </div>
  </div>
</form>

在此处输入图像描述

4

2 回答 2

1

根据您的输入，我确实喜欢这个，并且它的工作原理

安装：npm install --save @ng-bootstrap/ng-bootstrap

app.component.html

 <app-date-picker (selectDate)="change($event)" ></app-date-picker>

app.component.ts 

change(event) {
    alert(event);
    console.log(event);
  }

datepicker.component.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" (ngModelChange) = "change($event)" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
          <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
        </button>
      </div>
    </div>
  </div>
</form>

datepicker.component.ts 

@Component({
  selector: 'app-date-picker',
  templateUrl: './datepicker.component.html',
})
export class DatePickerComponent {
  model;
  @Output() selectDate = new EventEmitter<any>();

  change(event) {
    this.selectDate.emit(event);
  }
}

而不是(change)="onChange()"利用ngOnModleChange，所以它应该是(ngModelChange)="onChange($event)"

 onChange(event) {
      console.log('call');
      this.change.emit(event);
  }

在角度中，您可以进行绑定[(ngModel)]='propety'以执行两种方式绑定到控制。

如果您有超出您需要的父子组件场景EventEmitter，则将值发布到您的父组件。所以你需要这个

 //in child component
 @Output() selectDate = new EventEmitter<string>();
 //on change date push date 
 this.selectDate.emit(value);

在父组件中应该是

   <childComponent (selectDate) = 'OnSelectDate($event)'></childComponent>
   //in ts file you need to have method 
   OnSelectDate(event) {}
于 2018-04-12T04:52:50.977 回答
0

作为参考，如果有人来到这里，认为他们有完全相同的代码但他们的代码不起作用，那么 ngModel 和 ngModelChange 的顺序很重要！ NgModelChange 必须在 ngModel 之后的某个地方，否则这将无法正常工作。有关详细信息，请参阅https://github.com/angular/angular/issues/11234。

于 2020-06-25T13:07:55.777 回答