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

資訊專欄INFORMATION COLUMN

AngularJS 2 組件交流方式

Forest10 / 1859人閱讀

摘要:方式,定義了的鉤子也是可以引用的直接觀察某一個(gè)子組件調(diào)用的時(shí)候變身啦超級賽亞人變身啦超級賽亞人可以思考一下,是否任何形式的父組件流入子組件的方式,都可以觸發(fā)方法。其中,需要注意的是作用域的隔離,子組件可以很好的隔離作用域。

以下的測試?yán)佣伎梢栽?github 找到,但是最近好像不太穩(wěn)定。

其實(shí) ng2 在這方面做得挺好的,用起來也很簡單,所以看完基本就可以動手寫一寫。強(qiáng)大并不止是這一方面,在寫這些的過程中,通過一些配置,讓開發(fā)很純粹,有時(shí)間再錄一個(gè)新手入門的開發(fā)教程。

(1) 父組件向子組件流入數(shù)據(jù)

這種方式是最簡單的,在 ng2 中處理得非常完美,通過在子組件中標(biāo)記 @Input() 輸入接口的方式進(jìn)行接收父組件的值,我下面的 demo 主要分了幾種場景,盡可能的多覆蓋不同情況吧。

基本上例子中覆蓋了常見的情況:

直接傳入一個(gè)字符串的情況,不需要綁定父組件的一個(gè)變量

綁定父組件變量的情況,然后可以在父組件中不斷修改

輸入別名的情況,可以在子組件中對輸入的變量名進(jìn)行重新設(shè)置

ngOnChanges() 在子組件中監(jiān)聽屬性的修改

特殊情況下,我們需要對父組件傳入的數(shù)據(jù)進(jìn)行過濾

@ViewChild() 注解的跨多層子組件的觀察方式

說了這么多,來看一下實(shí)際的代碼吧。

// Parent component
import { Component, OnInit } from "@angular/core";
    
@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    
    baby: string = "你的名字";
    
    constructor() { }
    
    ngOnInit() {
    }
    
}
// Parent html

請輸入 Baby 的名字:

// Child component
import { Component, OnInit, Input, SimpleChange } from "@angular/core";

@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
    
    @Input() babyName: string;
    @Input() inputBabyName: string;
    @Input("aliasBabyName") aliasName: string;
    
    changes: string;
    
    constructor() { }
    
    ngOnInit() {
    }
    
    ngOnChanges(changes: SimpleChange) {
        this.changes = JSON.stringify(changes);
    }
}
// Child html

我是子組件的屬性(babyName) => {{babyName}}

我是跟父組件來:{{inputBabyName}}

我是 aliasBabyName => aliasName:{{aliasName}}

那么我需要過濾一下值要怎么弄呢?

這樣我們就可以用到 setter 和 getter 的特性來做,具體如下:

// Child component
_filterName: string = "";
    
@Input()
set filterName(n: string) {
    this._filterName = n + "wowo~~~";
}
    
get filterName() {
    return this._filterName;
}
// Parent html

這個(gè)其實(shí)也是用 @Input() 這個(gè)注解來做的,有點(diǎn)類似 computed 的概念吧,但是這樣做對于習(xí)慣 Java 的小伙伴是很友好的,其實(shí)通過一些權(quán)限的設(shè)置,還能夠更加的強(qiáng)大。

@ViewChild() 的方式

這種方式我覺得更多的是,我的溝通邏輯存在于 TS 中的時(shí)候就很實(shí)用。并且是描述性的定義方式,所以邏輯也是清晰的。

// Parent component
// 方式1,定義了 `#` 的鉤子也是可以引用的
@ViewChild("child") cc: ChildComponent;
    
// 直接觀察某一個(gè)子組件
@ViewChild(ChildComponent)
cc_other: ChildComponent;
    
// 調(diào)用的時(shí)候
this.cc.name = "變身啦!超級賽亞人";
this.cc_other.name = "變身啦!超級賽亞人 4";

可以思考一下,是否任何形式的父組件流入子組件的方式,都可以觸發(fā) ngOnChanges() 方法。

(2) 子組件向父組件通信

從軟件的結(jié)構(gòu)上來講,是上層抽象對底層的具體實(shí)現(xiàn)是隱藏的,所以具體層的東西最好盡可能少的知道抽象層的事情,也許表達(dá)方式不一樣,但是這樣的話封閉性會好很多,更多的暴露是以某一個(gè)權(quán)限開放的接口形式。但是通信是很復(fù)雜的東西,就好像人與人之間的聯(lián)系是一樣的。好吧,我們來具體說一下子組件怎么訪問父組件。主要通過的方式是:

在子組件定義一個(gè) @Output()EventEmitter 對象,這個(gè)對象可以是 Subject 的形式存在,也就是可以使用 RxJS 的思想來做,其中 T 范型表示定義需要傳入的數(shù)據(jù)具體類型。

父組件中定義一個(gè)自己的函數(shù)來修改自身的信息,或者再傳入其他子組件使用。

// Parent component
import { Component, OnInit } from "@angular/core";
    
@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    
    babyName: string;
    
    constructor() { }
    
    ngOnInit() {
    this.babyName = "小擼一號";
    }
    
    changeBabyName(newBabyName) {
        this.babyName = newBabyName;
    }
 
}
// Parent html

BabyName:{{babyName}}

import { Component, OnInit, Output, EventEmitter } from "@angular/core";
    
@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
    
    @Output()
    changeBabyName: EventEmitter = new EventEmitter();
    
    rhashcode = /d.d{4}/;
    
    constructor() { }
    
    ngOnInit() {
    }
    
    getNewBabyName(e) {
        let newName = this.makeHashCode("小擼新號");
        this.changeBabyName.next(newName);
    }
    
    /* UUID http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript */
    makeHashCode(prefix) {
        prefix = prefix || "60sky";
        return String(Math.random() + Math.random()).replace(this.rhashcode, prefix);
    }
}

其中需要注意的是父組件中方法注入的 $event 對象,這個(gè)對象在這里注入的是子組件傳入的值,所以在父組件中就可以直接使用了,我這里定義了 string 類型的數(shù)據(jù),所以傳入后定義接口的參數(shù)類型也是相對應(yīng)的。

(3) 無關(guān)組件的通信

ng2 在無關(guān)組件的處理上,真的處理得很干脆,給你一個(gè)鉤子,你用吧!就是這種簡單的思路。這里我只介紹部分,因?yàn)楣俜轿臋n有更加詳細(xì)的介紹,不然我這篇文章就寫得太長了~因?yàn)榉绞接泻芏喾N,發(fā)揮小聰明就能發(fā)現(xiàn)很多。

事件回調(diào)傳來傳去的方式

Service 的注入

# 鉤子的方式

這里介紹的是一個(gè) # 鉤子的方式來做,直接來代碼吧,很方便的。
其中,需要注意的是作用域的隔離,子組件可以很好的隔離作用域。

// Parent component
import { Component, OnInit } from "@angular/core";
    
@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
    
    babyName: string = "小擼一號";
    
    constructor() { }
    
    ngOnInit() {
    }
    
}
// Parent html

    


// Child component
import { Component, OnInit, Input } from "@angular/core";
    
@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
    
    @Input() childName: string;
    
    constructor() { }
    
    ngOnInit() {
    }
    
}

Child:{{childName}}

// OtherChild component
import { Component, OnInit, Input } from "@angular/core";
    
@Component({
    selector: "app-otherChild",
    templateUrl: "./otherChild.component.html",
    styleUrls: ["./otherChild.component.css"]
})
export class OtherChildComponent implements OnInit {
    
    @Input() helloBaby: string;
    
    constructor() { }
    
    ngOnInit() {
    }
    
    changeChildName(e) {
        this.helloBaby = "小擼新號";
    }
}
// OtherChild html

otherChild:{{helloBaby}}

其實(shí)還有一些方式和特殊場景下的處理,所以總體來說,ng2 在這方面是不錯(cuò)的~

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/91341.html

相關(guān)文章

  • 【譯】《精通使用AngularJS開發(fā)Web App》(一) --- 相關(guān)背景、社區(qū)、工具介紹

    摘要:下一篇譯精通使用開發(fā)二原版書名第一章之道這一章主要是介紹,包括這個(gè)框架以及它背后的項(xiàng)目。幸運(yùn)的是,擁有一個(gè)活躍的,支持度高的社區(qū)。另外,社區(qū)還為已經(jīng)存在的工具箱里貢獻(xiàn)了許多有意思的工具。 下一篇:【譯】《精通使用AngularJS開發(fā)Web App》(二) 原版書名:Mastering Web Application Development with AngularJS Ch...

    ddongjian0000 評論0 收藏0
  • Angular 4 簡單入門筆記

    摘要:首先,我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個(gè)路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁面中需要一個(gè)容器去承載上面代碼中的定義了用戶點(diǎn)擊后的路由跳轉(zhuǎn),定義該路由激活時(shí)的樣式類。 剛實(shí)習(xí)的時(shí)候用過AngularJS,那時(shí)候真的是連原生JavaScript都不會寫,依樣畫葫蘆做了幾個(gè)管理后臺。然后突然換項(xiàng)目了,AngularJS就不寫了,感覺前前后后接觸了一年多的Angula...

    whlong 評論0 收藏0
  • 一個(gè)基于Angular+Ionic+Phonegap的混合APP實(shí)戰(zhàn)

    摘要:有二維碼掃描功能,還做了類似消息可拖拽效果,上拉下拉刷新,輪播圖組件。特別適合用于基于模式的移動應(yīng)用程序開發(fā)。簡介是一個(gè)用基于,和的,創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。 這個(gè)項(xiàng)目做得比較早,當(dāng)時(shí)是基于ionic1和angular1做的。做了四個(gè)tabs的app,首頁模仿攜程首頁,第二頁主要是phonegap調(diào)用手機(jī)核心功能,第三頁模仿微信和qq聊天頁,第四頁模仿一般手機(jī)的表單設(shè)...

    孫淑建 評論0 收藏0
  • 割裂的前端工程師--- 2017年前端生態(tài)窺探

    摘要:主要兼容的微信的瀏覽器,因?yàn)橐谂笥讶頎I銷,總體來說,會偏設(shè)計(jì)以及動畫些。 有一天,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位?這是干什么的?重構(gòu)工程師 這個(gè)問題引發(fā)了我對前端領(lǐng)域發(fā)展的思考,所以我來梳理下前端領(lǐng)域的發(fā)展過程,順便小小的預(yù)測下2017年的趨勢。不想看回憶的,可以直接跳到后面看展望。 神說,要有光,就有了光 自1991年蒂姆·伯納斯-李公開提及HTML...

    duan199226 評論0 收藏0
  • 割裂的前端工程師--- 2017年前端生態(tài)窺探

    摘要:主要兼容的微信的瀏覽器,因?yàn)橐谂笥讶頎I銷,總體來說,會偏設(shè)計(jì)以及動畫些。 有一天,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位?這是干什么的?重構(gòu)工程師 這個(gè)問題引發(fā)了我對前端領(lǐng)域發(fā)展的思考,所以我來梳理下前端領(lǐng)域的發(fā)展過程,順便小小的預(yù)測下2017年的趨勢。不想看回憶的,可以直接跳到后面看展望。 神說,要有光,就有了光 自1991年蒂姆·伯納斯-李公開提及HTML...

    miguel.jiang 評論0 收藏0

發(fā)表評論

0條評論

Forest10

|高級講師

TA的文章

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