Angular 組件通訊的三種方式

原文：medium.com/@mirokoczka…

這個教程適合初學者看，這裏介紹的是最多見的三種通訊方式。 如圖，下面的頁面裏有個名爲side-bar的組件，組件內部有個toggle方法，能夠控制顯示或隱藏，這個須要其餘組件來調用toggle的方法。

咱們能夠經過如下三種方式來實現：

1. 傳遞一個組件的引用給另外一個組件
2. 經過子組件發送EventEmitter和父組件通訊
3. 經過serive通訊

每一個例子都會有StackBlitz在線演示地址

1. 傳遞一個組件的引用給另外一個組件

Demo1 模板引用變量

模板引用變量一般用來引用模板中的某個 DOM 元素，它還能夠引用 Angular 組件或指令或Web Component。 使用井號 (#) 來聲明引用變量。 #phone 的意思就是聲明一個名叫 phone 的變量來引用 元素

這種方式適合組件間有依賴關係。 app component

<app-side-bar-toggle [sideBar]="sideBar"></app-side-bar-toggle>
<app-side-bar #sideBar></app-side-bar>
複製代碼

app.component.html

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  @Input() sideBar: SideBarComponent;

  @HostListener('click')
  click() {
    this.sideBar.toggle();
  }
}
複製代碼

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}
複製代碼

2. 經過子組件發送EventEmitter和父組件通訊

Demo2 這種方式利用事件傳播，須要在子組件中寫 app.component.html

<app-side-bar-toggle (toggle)="toggleSideBar()"></app-side-bar-toggle>
<app-side-bar [isOpen]="sideBarIsOpened"></app-side-bar>
複製代碼

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  sideBarIsOpened = false;

  toggleSideBar(shouldOpen: boolean) {
    this.sideBarIsOpened = !this.sideBarIsOpened;
  }
}
複製代碼

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  @Output() toggle: EventEmitter<null> = new EventEmitter();

  @HostListener('click')
  click() {
    this.toggle.emit();
  }
}
複製代碼

side-bar.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open') @Input()
  isOpen = false;
}
複製代碼

3. 經過service進行通訊

Demo3 這裏須要新建side-bar.service，咱們把toggle方法寫到service文件中， 而後將service注入到side-bar-toggle.component和side-bar-toggle.component，前者調用toggle方法，發送事件流，後者訂閱事件

app.component.html

<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>
複製代碼

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent {

  constructor(
    private sideBarService: SideBarService
  ) { }

  @HostListener('click')
  click() {
    this.sideBarService.toggle();
  }
}
複製代碼

side-bar.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  constructor(
    private sideBarService: SideBarService
  ) { }

  ngOnInit() {
    this.sideBarService.change.subscribe(isOpen => {
      this.isOpen = isOpen;
    });
  }
}
複製代碼

side-bar.service.ts

@Injectable()
export class SideBarService {

  isOpen = false;

  @Output() change: EventEmitter<boolean> = new EventEmitter();

  toggle() {
    this.isOpen = !this.isOpen;
    this.change.emit(this.isOpen);
  }
}
複製代碼