Question

我使用Angular Material设计及其滑块组件，它拥有百分比属性（see API reference for Angular Material slider），并且在加载模板时我需要在组件中使用该值。当滑块拇指移动等事件发生时，我可以在更改或输入时获得该值，但在用户触摸滑块之前，我不知道如何在第一次加载时获取它。我转发从后端获得的数据，例如，百分比为0.5，我希望该值传递给我的组件。我尝试了以下方法：

我使用模板参考#matsliderratio和setts属性百分比来matsliderratio.percent。

    <mat-slider #matsliderratio [attr.percent]="matsliderratio.percent"
      [disabled]="!margin.useMargin"
      [min]="min"
      [max]="max"
      [step]="step"
      [(ngModel)]="biased_addition"
      (input)="onThumbMoves($event)">
    </mat-slider>

在我的组件中，我有以下内容：

  export class MarginComponent implements OnInit, DoCheck, AfterViewInit {
    ...
    @ViewChild('matsliderratio', {read: ElementRef}) matsliderRatioRef: ElementRef;
    ...

  ngAfterViewInit() {
    console.log(this.matsliderRatioRef.nativeElement); // this returns all correct values including percent=0.5
    console.log(this.matsliderRatioRef.nativeElement.getAttribute('percent')); // this returns 0 instead of 0.5
  }
}

因此，它返回滑块组件的一些默认值，而不是当前的滑块组件。我怎样才能获得正确的价值？另外，我通常对如何将模板中的当前值传递给组件感兴趣。

如何在Angular中将值从模板传递给组件？

0 个答案: