91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Input和Output如何在Angular2中使用

發布時間:2021-04-02 17:16:24 來源:億速云 閱讀:231 作者:Leah 欄目:web開發

今天就跟大家聊聊有關Input和Output如何在Angular2中使用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。

對于angular2中的Input和Output可以和AngularJS中指令作類比。

Input相當于指令的值綁定,無論是單向的(@)還是雙向的(=)。都是將父作用域的值“輸入”到子作用域中,然后子作用域進行相關處理。

Output相當于指令的方法綁定,子作用域觸發事件執行響應函數,而響應函數方法體則位于父作用域中,相當于將事件“輸出到”父作用域中,在父作用域中處理。

看個angular2示例吧,我們定義一個子組件,獲取父作用域的數組值并以列表形式顯示,然后當點擊子組件的元素時調用父組件的方法將該元素刪除。

//app.component.html
<app-child [values]="data" (childEvent) = "getChildEvent($event)">
</app-child>

//app.component.ts
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 data = [1,2,3];

 getChildEvent(index){
  console.log(index);
  this.data.splice(index,1);
 }
}

以上是跟組件app-root的組件類及模板,可以我們把data輸入到子組件app-child中,然后接收childEvent事件并對其進行響應。

//app-child.component.html
<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)">
 {{item}}
</p>


//app-child.component.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 @Input() values;
 @Output() childEvent = new EventEmitter<any>();
 constructor() { }

 ngOnInit() {

 }
 fireChildEvent(index){
  this.childEvent.emit(index);
 }
}

子組件定義了values接收了父組件的輸入,這里就是data值,然后使用ngFor指令顯示。

當點擊每個元素的時候觸發了click事件,執行fireChildEvent函數,該函數要將元素的index值“輸出”到父組件中進行處理。

Output一般都是一個EventEmitter的實例,使用實例的emit方法將參數emit到父組件中,觸發父組件的childEvent事件。

然后父組件監聽到該事件的發生,執行對應的處理函數getChildEvent,刪除傳遞的元素索引指向的數據,同時,視圖更新。

看完上述內容,你們對Input和Output如何在Angular2中使用有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

乌什县| 自治县| 湖州市| 岳普湖县| 临泉县| 焦作市| 古田县| 临海市| 鄂托克旗| 墨竹工卡县| 如东县| 九龙城区| 三门县| 葵青区| 长岛县| 宁晋县| 萍乡市| 内江市| 页游| 虞城县| 福贡县| 永吉县| 青冈县| 汪清县| 兴安县| 富川| 辽源市| 松江区| 肥东县| 章丘市| 桐乡市| 开远市| 团风县| 临海市| 桦南县| 通渭县| 东乡县| 保亭| 义乌市| 揭阳市| 昭通市|