溫馨提示×

Angular中的@input怎么使用

小億
161
2024-02-02 09:23:33
欄目: 編程語言

@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`屬性也會同步更新,并在模板中顯示新的值。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女