@Input裝飾器用于在Angular組件中創建一個輸入屬性,以便從父組件傳遞數據到子組件。
要使用@Input裝飾器,請按照以下步驟操作:
1. 在子組件的類中的輸入屬性聲明之前,導入Input裝飾器:
```typescript
import { Component, Input } from '@angular/core';
```
2. 在需要接收父組件數據的屬性前,使用@Input裝飾器:
```typescript
@Input() myInputProperty: any;
```
3. 在子組件的模板中,可以使用該屬性來顯示傳遞的數據:
```html
{{ myInputProperty }}
```
4. 在父組件的模板中,將數據通過屬性綁定傳遞給子組件:
```html
```
在上面的代碼中,`parentData`是父組件中的一個屬性,它的值將通過屬性綁定傳遞給子組件的`myInputProperty`屬性。
這樣,當父組件的`parentData`屬性發生變化時,子組件中的`myInputProperty`屬性也會同步更新,并在模板中顯示新的值。