厦门市小程序流程_详解Angular2组件之间怎么通信

2021-01-11 16:53

详解Angular2组件之间如何通信       本篇文章主要介绍了详解Angular2组件之间如何通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

子获得父实例

如果不了解forwardRef用处的的可以看

@Host 表示这个Injector必须是host element在这里可以理解为 parent

import {Host,Component,forwardRef} from 'angular2/core';
@Component({
 selector: 'child',
 template: `
 h2 child /h2 
class Child {
 constructor(@Host() @Inject(forwardRef(()= App)) app:App) {
 setInterval(()= {
 app.i++;
 }, 1000);
@Component({
 selector: 'App',
 directives: [Child],
 template: `
 h1 App {{i}} /h1 
 child /child 
export class App {
 i:number = 0;

父获得子实例

子元素指令在父constructor时是获取不到的，所以必须在组件的ngAfterViewInit生命周期钩子后才能获取，如果对组件生命周期不了解的话，可以参考

import {ViewChild,Component} from 'angular2/core';
@Component({
 selector: 'child',
 template: `
 h2 child {{i}} /h2 
class Child {
 i:number = 0;
@Component({
 selector: 'App',
 directives: [Child],
 template: `
 h1 App {{i}} /h1 
 child /child 
export class App {
 @ViewChild(Child) child:Child;
 ngAfterViewInit() {
 setInterval(()= {
 this.child.i++;
 }, 1000)

service 方式

import {Component,Injectable} from 'angular2/core';
@Injectable();
class KittencupService {
 i:number = 0;
@Component({
 selector: 'child',
 template: `
 h2 child {{service.i}} /h2 
class Child {
 constructor(public service:KittencupService){
@Component({
 selector: 'App',
 directives: [Child],
 providers: [KittencupService],
 template: `
 h1 App {{i}} /h1 
 child /child 
export class App {
 constructor(service:KittencupService) {
 setInterval(()= {
 service.i++;
 }, 1000)

service EventEmitter方式

import {Component,Injectable,EventEmitter} from 'angular2/core';
@Injectable()
class KittencupService {
 change: EventEmitter number 
 constructor(){
 this.change = new EventEmitter();
@Component({
 selector: 'child',
 template: `
 h2 child {{i}} /h2 
class Child {
 public i:number = 0;
 constructor(public service:KittencupService){
 service.change.subscribe((value:number)= {
 this.i = value;
@Component({
 selector: 'App',
 directives: [Child],
 providers: [KittencupService],
 template: `
 h1 App {{i}} /h1 
 child /child 
export class App {
 i:number = 0;
 constructor(service:KittencupService) {
 setInterval(()= {
 service.change.emit(++this.i);
 }, 1000)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。