首页 文章

Angular bootstrap ngbdatepicker删除（更改）方法所以是否有任何其他选项来读取控制器上的模型值

提问于
浏览 次
0

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

提前致谢

下面是我使用子选择器在这里打开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>

enter image description here

angular typescript bootstrap-4 ngb-datepicker

1 回答

  • 0

    根据你的输入，我确实喜欢这个，它的工作

    已安装： 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);
  }

    在angular中你可以做绑定 [(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) {}
    回复于

相关问题