Угловой метод начальной загрузки ngbdatepicker для удаления (изменения), так есть ли какая-либо другая опция для считывания значения модели на контроллере

Question

Я пытаюсь с начальной загрузкой 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>

Answer 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) {}

Answer 2

Для справки: если кто-то приходит сюда и думает, что у них точно такой же код, но его код не работает, порядок ngModel и ngModelChange имеет значение! NgModelChange должен быть где-то после ngModel, иначе это не будет работать правильно. Подробности смотрите на https://github.com/angular/angular/issues/11234.