如何在我的自定义角度组件上设置属性

Question

我对 Angular 很陌生，正在尝试创建我的第一个 UI。

我创建了一个自定义组件 app-dropdown，它基本上是一个 Material 选择元素。 （货币数组在组件的 .ts 文件中）

<mat-form-field>
  <mat-select placeholder="Currency" >
    <mat-option *ngFor="let currency of currencies" [value]="currency">
      {{currency}}
    </mat-option>
  </mat-select>
</mat-form-field>

然后我将此组件放置在另一个自定义组件 app-buy-card 中。

<mat-card>
  <p>I have</p><app-dropdown></app-dropdown><br>
  <p>I want</p><app-dropdown></app-dropdown><br>
  <p>I live in</p><app-dropdown></app-dropdown><br>
</mat-card>

在 app-buy-card 中定义 app-dropdown 组件时，我想在打开的 app-dropdown 标记中添加一个属性，指定默认情况下应选择哪些元素。我曾尝试使用绑定和双向绑定以及 ng-init 来实现这一点，但我无法让它工作。有什么想法吗？

Answer 1

您正在寻找@Input。

@Input selectedValue: string;

ngOnInit() {
    // here you can access the selectedValue input
}

然后在你要使用的组件上：

<app-dropdown [selectedValue]="usd">
</app-dropdown>