国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

angular6 自定義組件，實現雙向數據綁定

Ajian / 2178人閱讀

摘要：在編寫組件之前，首先看一下組件的使用方式和效果其中標簽是自定義組件，利用符號進行雙向綁定，下面標簽顯示所綁定的值。

在包裝輸入類型的組件時，我們需要向外暴露數據接口，用戶輸入和輸出，這時候在組件內部定義雙向綁定，會大大方便用戶的使用。

在編寫組件之前，首先看一下組件的使用方式和效果：



app.component：{{testBinding}}

其中binding-test標簽是自定義組件，利用[()]符號進行雙向綁定，下面p標簽顯示所綁定的值。
效果圖如下：

binding-test組件綁定的值顯示在網頁上。

編寫組件

新建組件視圖

簡單起見，我們創建的組件只包含一個輸入框。新建binding-test.component.html如下：

視圖層只有一個label和一個input標簽，這是一個最簡單的表單。
其中ngModelChange是當input發生變化時，觸發的事件。

新建組件類

雙向綁定的組件需要有一個 Input屬性和該屬性對應的Output事件，組件類binding-test.component.ts代碼如下：

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
  // tslint:disable-next-line:component-selector
  selector: "binding-test",
  templateUrl: "./binding-test.component.html",
  styleUrls: ["./binding-test.component.css"]
})

/**
 * 自定義組件雙向數據綁定
 */
export class BindingTestComponent implements OnInit {



  @Input() public userName;

  @Output() public userNameChange = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }


  /**
   * change
   */
  public change(userName: string) {
    this.userNameChange.emit(this.userName);
  }
}

其中主要代碼為

注意：Output中EventEmitter類型屬性的名字必須為 Input屬性對應名字+Change

至此，該組件即可使用類似于[(ngModel)]語法的雙向綁定了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98266.html

相關文章

  • angular6 利用 ngContentOutlet 實現組件位置交換

    摘要：實現組件位置交換中視圖是和數據綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數據的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態創建以上兩個組件，并實現位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實現組件位置交換(重排)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ngConten...

    asce1885 評論0 收藏0

  • angular6 利用 ngContentOutlet 實現組件位置交換

    摘要：實現組件位置交換中視圖是和數據綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數據的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態創建以上兩個組件，并實現位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實現組件位置交換(重排)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ngConten...

    OnlyMyRailgun 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<