摘要：?jiǎn)雾?yè)面應(yīng)用組件通信有以下幾種，這篇文章主要講通信父組件子組件子組件父組件組件組件父組件子組件子組件父組件本質(zhì)上還是注入父組件不推薦使用局部變量的的的上面圖表總結(jié)了能用到通信方案期中最后種是通用的的組件之間都可以使用這種其中是最最牛逼的用法甩

單頁(yè)面應(yīng)用組件通信有以下幾種，這篇文章主要講 Angular 通信

父組件 => 子組件

子組件 => 父組件

組件A = > 組件B

上面圖表總結(jié)了能用到通信方案,期中最后3種,是通用的,angular的組件之間都可以使用這3種,其中Rxjs是最最牛逼的用法,甩redux,promise,這些同樣基于函數(shù)式的狀態(tài)管理幾條街,下面一一說(shuō)來(lái)

@Component({
  selector: "app-parent",
template: "
childText:
",
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
  varString: string;
  constructor() { }
  ngOnInit() {
    this.varString = "從父組件傳過(guò)來(lái)的" ;
  }
}

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

setter 是攔截@input 屬性,因?yàn)槲覀冊(cè)诮M件通信的時(shí)候,常常需要對(duì)輸入的屬性處理下,就需要setter了,setter和getter常配套使用,稍微修改下上面的child.component.ts
child.component.ts

import { Component, OnInit, Input } from "@angular/core";
@Component({
  selector: "app-child",
  template: "
{{textContent}}
",
  styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
_textContent:string;
  @Input()
  set textContent(text: string){
   this._textContent = !text: "啥都沒(méi)有給我" ? text ;
  } ;
  get textContent(){
  return this._textContent;
  }
  constructor() { }
  ngOnInit() {
  }
}

這個(gè)是通過(guò)angular生命周期鉤子來(lái)檢測(cè),不推薦使用,要使用的話(huà)可以參angular文檔

@ViewChild() 一般用在調(diào)用子組件非私有的方法

           import {Component, OnInit, ViewChild} from "@angular/core";
       import {ViewChildChildComponent} from "../view-child-child/view-child-child.component";
    @Component({
      selector: "app-parent",
      templateUrl: "./parent.component.html",
      styleUrls: ["./parent.component.css"]
    })
    export class ParentComponent implements OnInit {
      varString: string;
      @ViewChild(ViewChildChildComponent)
      viewChildChildComponent: ViewChildChildComponent;
      constructor() { }
      ngOnInit() {
        this.varString = "從父組件傳過(guò)來(lái)的" ;
      }
      clickEvent(clickEvent: any) {
        console.log(clickEvent);
        this.viewChildChildComponent.myName(clickEvent.value);
      }
    }

      import { Component, OnInit } from "@angular/core";
    @Component({
      selector: "app-view-child-child",
      templateUrl: "./view-child-child.component.html",
      styleUrls: ["./view-child-child.component.css"]
    })
    export class ViewChildChildComponent implements OnInit {
      constructor() { }
      name: string;
      myName(name: string) {
          console.log(name);
          this.name = name ;
      }
      ngOnInit() {
      }
    }

局部變量和viewChild類(lèi)似,只能用在html模板里,修改parent.component.html,通過(guò)#viewChild這個(gè)變量來(lái)表示子組件,就能調(diào)用子組件的方法了.

    
    局部變量傳值
    
            

child 組件如下

@Component({
  selector: "app-view-child-child",
  templateUrl: "./view-child-child.component.html",
  styleUrls: ["./view-child-child.component.css"]
})
export class ViewChildChildComponent implements OnInit {

  constructor() { }
  name: string;
  myName(name: string) {
      console.log(name);
      this.name = name ;
  }
  ngOnInit() {
  }

}

output這種常見(jiàn)的通信,本質(zhì)是給子組件傳入一個(gè)function,在子組件里執(zhí)行完某些方法后,再執(zhí)行傳入的這個(gè)回調(diào)function,將值傳給父組件

parent.component.ts
@Component({
  selector: "app-child-to-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
})
export class ChildToParentComponent implements OnInit {

  childName: string;
  childNameForInject: string;
  constructor( ) { }
  ngOnInit() {
  }
  showChildName(name: string) {
    this.childName = name;
  }
}

parent.component.html

  
output方式 childText:{{childName}}
  

  

  child.component.ts
  export class OutputChildComponent implements OnInit {
  // 傳入的回調(diào)事件
  @Output() public childNameEventEmitter: EventEmitter = new EventEmitter();
  constructor() { }
  ngOnInit() {
  }
  showMyName(value) {
    //這里就執(zhí)行,父組件傳入的函數(shù)
    this.childNameEventEmitter.emit(value);
  }
}

這個(gè)原理的原因是父,子組件本質(zhì)生命周期是一樣的

export class OutputChildComponent implements OnInit {
  // 注入父組件
  constructor(private childToParentComponent: ChildToParentComponent) { }
  ngOnInit() {
  }
  showMyName(value) {
    this.childToParentComponent.childNameForInject = value;
  }
}

angular中service是單例的,所以三種通信類(lèi)型都可以通過(guò)service,很多前端對(duì)單例理解的不是很清楚,本質(zhì)就是
,你在某個(gè)module中注入service,所有這個(gè)modul的component都可以拿到這個(gè)service的屬性,方法,是共享的,所以常在app.moudule.ts注入日志service,http攔截service,在子module注入的service,只能這個(gè)子module能共享,在component注入的service,就只能子的component的能拿到service,下面以注入到app.module.ts,的service來(lái)演示

user.service.ts
@Injectable()
export class UserService {
  age: number;
  userName: string;
  constructor() { }
}
app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    SiblingAComponent,
    SiblingBComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }
SiblingBComponent.ts
@Component({
  selector: "app-sibling-b",
  templateUrl: "./sibling-b.component.html",
  styleUrls: ["./sibling-b.component.css"]
})
export class SiblingBComponent implements OnInit {
  constructor(private userService: UserService) {
    this.userService.userName = "王二";
  }
  ngOnInit() {
  }
}
SiblingAComponent.ts
@Component({
  selector: "app-sibling-a",
  templateUrl: "./sibling-a.component.html",
  styleUrls: ["./sibling-a.component.css"]
})
export class SiblingAComponent implements OnInit {
  userName: string;
  constructor(private userService: UserService) {
  }
  ngOnInit() {
    this.userName = this.userService.userName;
  }
}

這個(gè)是最牛逼的,基于訂閱發(fā)布的這種流文件處理,一旦訂閱,發(fā)布的源頭發(fā)生改變,訂閱者就能拿到這個(gè)變化;這樣說(shuō)不是很好理解,簡(jiǎn)單解釋就是,b.js,c.js,d.js訂閱了a.js里某個(gè)值變化,b.js,c.js,d.js立馬獲取到這個(gè)變化的,但是a.js并沒(méi)有主動(dòng)調(diào)用b.js,c.js,d.js這些里面的方法,舉個(gè)簡(jiǎn)單的例子,每個(gè)頁(yè)面在處理ajax請(qǐng)求的時(shí)候,都有一彈出的提示信息,一般我會(huì)在
組件的template中中放一個(gè)提示框的組件,這樣很繁瑣每個(gè)組件都要來(lái)一次,如果基于Rx.js,就可以在app.component.ts中放這個(gè)提示組件,然后app.component.ts訂閱公共的service,就比較省事了,代碼如下
首先搞一個(gè)alset.service.ts

import {Injectable} from "@angular/core";
import {Subject} from "rxjs/Subject";
@Injectable()
export class AlertService {
  private messageSu = new Subject();  //
  messageObserve = this.messageSu.asObservable();
  private  setMessage(message: string) {
    this.messageSu.next(message);
  }
  public success(message: string, callback?: Function) {
    this.setMessage(message);
    callback();
  }
}

sibling-a.component.ts

@Component({
  selector: "app-sibling-a",
  templateUrl: "./sibling-a.component.html",
  styleUrls: ["./sibling-a.component.css"]
})
export class SiblingAComponent implements OnInit {
  userName: string;
  constructor(private userService: UserService, private alertService: AlertService) {
  }
  ngOnInit() {
    this.userName = this.userService.userName;
    // 改變alertService的信息源
    this.alertService.success("初始化成功");
  }
}

app.component.ts

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
  message: string;
  constructor(private alertService: AlertService) {
    //訂閱alertServcie的message服務(wù)
     this.alertService.messageObserve.subscribe((res: any) => {
      this.message = res;
    });
  }
}

這樣訂閱者就能動(dòng)態(tài)的跟著發(fā)布源變化

總結(jié): 以上就是常用的的通信方式,各種場(chǎng)景可以采取不同的方法

我的博客