从另一个组件访问组件属性答案

【问题标题】：Accessing component properties from another component从另一个组件访问组件属性
【发布时间】：2019-09-28 11:12:52
【问题描述】：

我是 Angular 的新手，正在尝试实现自定义材料日期选择器组件（仅允许选择月份和年份的组件），并且无法从单独的组件访问其值。我修改了https://v7.material.angular.io/components/datepicker/overview 中的一个示例，并尝试使用此特定stackoverflow 帖子/答案中的建议：https://stackoverflow.com/a/50723598（Angular 7+ 部分）。

这是我的月-年-datepicker.component.html：

<mat-form-field class="reporting-datepicker">
  <input matInput [matDatepicker]="dp" [(ngModel)]="inputValue" (ngModelChange)="inputValueChange.emit(inputDPValue)" [min]="minDate">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp
                  [startView]="viewMode"
                  (yearSelected)="chosenYearHandler($event, dp)"
                  (monthSelected)="chosenMonthHandler($event, dp)"
                  panelClass="">
  </mat-datepicker>
</mat-form-field>

这是我的month-year-datepicker.component.ts（相关部分）：

@Component({
  selector: 'month-year-datepicker',
  templateUrl: 'month-year-datepicker.component.html',
  styleUrls: ['month-year-datepicker.component.css'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}
  ],
})

export class MonthYearDatepicker {
  viewMode: string = "year";
  minDate: Moment;

  @Input() yearOnly: boolean = false;
  @Input() inputValue: Moment;
  @Output() inputValueChange: EventEmitter<Moment> = new EventEmitter<Moment>();

  constructor() {}

  ngOnInit() {
    if (this.yearOnly)
      this.viewMode = "multi-year"
    this.minDate = moment().subtract(5, 'months');
  }  

  chosenYearHandler(normalizedYear: Moment, datepicker: MatDatepicker<Moment>) {
    var ctrlValue = moment(this.inputValue);
    ctrlValue.year(normalizedYear.year());
    this.inputValue = ctrlValue;
    if (this.yearOnly) datepicker.close();
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    var ctrlValue = moment(this.inputValue);
    ctrlValue.month(normalizedMonth.month());
    this.inputValue = ctrlValue;
    datepicker.close();
  }
}

然后，在我单独的reporting.component.html 文件中，我添加了日期选择器，如下所示：

<month-year-datepicker [yearOnly]="false" [(inputValue)]="datepickerValue" ngDefaultControl></month-year-datepicker>

但是，在我单独的 reporting.component.ts 文件（简化）中，我无法访问 datepickerValue 的值：

export class ReportingComponent extends ComponentBase implements OnInit, OnDestroy {

  datepickerValue: Date;

  constructor() {}
  ngOnInit(){}

  getDate() {
    return this.datepickerValue; // <- this is undefined still
  }

}

我显然遗漏了一些东西或误解了组件之间的绑定是如何工作的，非常感谢任何帮助！谢谢！

【问题讨论】：

您是否尝试从 MonthYearDatepicker 组件中订阅 inputValueChange 事件，以查看该事件是否触发？

标签： angular

【解决方案1】：

更新

(ngModelChange)="inputValueChange.emit(inputDPValue)"

到

(ngModelChange)="inputValueChange.emit($event)"

还将此拼写错误 [(ngModel)]="inputValue" 更新为 [ngModel]="inputValue"，因为您已经在使用 (ngModelChange) 语法。它不太可能破坏任何东西，但您应该使用一种语法或另一种语法，而不是两者兼而有之。

【讨论】：