在 Angular 中將參數傳遞給我的組件

Question

我正在以 angular 自定義日期選擇器，因為我需要在整個應用程序中使用它。 有沒有辦法通過從組件的定義中傳遞參數來做到這一點。 我的意思是例如：

考慮到我組件的標簽是<app-date-picker></app-date-picker> ，里面的代碼很簡單：

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Date issued" disabled>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field>

因此，我需要像這樣定義我的組件<app-date-picker [inputDisabled]="false"></app-date-picker>以便在某些情況下禁用輸入，或者像這樣<app-date-picker [inputDisabled]="true"></app-date-picker>用於啟用輸入。

這可能嗎？ 有什么辦法呢？

Answer 1

你定義的方式是一個完美的方式！

<app-date-picker [inputDisabled]="false"></app-date-picker>

在 DatePickerComponent 中，您需要使用@Input獲取輸入

在日期選擇器.component.ts

export class DatePickerComponent {
    @Input() inputDisabled: boolean;
}

在日期選擇器.component.html

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Date issued" [disabled]="inputDisabled">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field>