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);
  }
}
复制代码