分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular4 组件通讯方法大全，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。

最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。

1.父→子 input

parent.ts

import { Component } from '@angular/core';

@Component({
  SELEctor: 'page-parent',templateUrl: 'parent.html',})
export class ParentPage {
  i: number = 0;
  constructor() {
    seTinterval(() => {
      this.i++;
    },1000)
  }
}

parent.html
<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Parent</h2>
  <page-child [content]="i"></page-child>
</ion-content>

child.ts

import { Component,Input } from '@angular/core';

@Component({
  SELEctor: 'page-child',templateUrl: 'child.html',})
export class ChildPage {
@input() content:String;
  constructor() {
  }
}

child.html

<ion-content padding>
child:{{Content}}
</ion-content>

结果:

2.子→父 output

parent.ts

import { Component } from '@angular/core';

@Component({
  SELEctor: 'page-parent',})
export class ParentPage {
  i: number = 0;

  numberIChange(i:number){
      this.i = i;
  }
}

parent.html


<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Parent:{{i}}</h2>
  <page-child (changenumber)="numberIChange($event)"></page-child>
</ion-content>

child.ts

import { Component,EventEmitter,Output } from '@angular/core';

@Component({
  SELEctor: 'page-child',})

export class ChildPage {
  @Output() changenumber: EventEmitter<number> = new EventEmitter();
  number: number = 0;
  constructor() {
    seTinterval(() => {
      this.changenumber.emit(++this.number);
    },1000)
  }
}

child.html

<ion-content padding>
     child
</ion-content>

结果：

3.子获得父实例

parent.ts

import { Component } from '@angular/core';

@Component({
  SELEctor: 'page-parent',})
export class ParentPage {
  i:number = 0;
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>parent: {{i}}</h1>
  <page-child></page-child>
</ion-content>

child.ts

import { Component,Input,Output,Host,Inject,forWARDRef } from '@angular/core';
import{ParentPagE} from '../parent/parent';
@Component({
  SELEctor: 'page-child',})
export class ChildPage {
    constructor( @Host() @Inject(forWARDRef(() => ParentPagE)) app: ParentPagE) {
        seTinterval(() => {
            app.i++;
        },1000);
    }
}

child.html

<ion-content padding>
 child 
</ion-content>

结果：

4.父获得子实例

parent.ts

import {ViewChild,Component } from '@angular/core';
import{ChildPagE}from '../child/child';

@Component({
  SELEctor: 'page-parent',})
export class ParentPage {
  @ViewChild(ChildPagE) child:ChildPage;
    ngAfterViewInit() {
        seTinterval(()=> {
            this.child.i++;
        },1000)
    }
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>parent {{i}}</h1>
  <page-child></page-child>
</ion-content>

child.ts

import { Component,forWARDRef } from '@angular/core';


@Component({
  SELEctor: 'page-child',})
export class ChildPage {
    i:number = 0;
}

child.html

<ion-content padding>
<h2>child {{i}}</h2>
</ion-content>

结果：

5.service

parent.ts

import { Component } from '@angular/core';
import{myservicE}from '../child/myservice'

@Component({
  SELEctor: 'page-parent',})
export class ParentPage {

i:number=0;

   constructor(service:myservicE) {
        seTinterval(()=> {
            service.i++;
        },1000)
    }
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <h1>parent {{i}}</h1>
   <page-child></page-child>
</ion-content>

child.ts

import { Component} from '@angular/core';
import{myservicE}from "../child/myservice"
@Component({
  SELEctor: 'page-child',})
export class ChildPage {
    constructor(public service:myservicE){
    }
}

child.html

<ion-content padding>
<h2>child {{service.i}}</h2>
</ion-content>

@H_796_543@myservice.ts
ps:记得在app.module.ts 加上providers: [Kmyservice]

import{Injectable } from '@angular/core';
@Injectable()
export class Kmyservice {
    i:number = 0;
}

结果：

6.EventEmitter

@H_255_0@myservice.ts

import {Component,Injectable,EventEmitter} from '@angular/core';
@Injectable()
export class myservice {
    change: EventEmitter<number>;

    constructor(){
        this.change = new EventEmitter();
    }
}

parent.ts

import { Component } from '@angular/core';
import{myservicE}from '../child/myservice'

@Component({
  SELEctor: 'page-parent',})
export class ParentPage {
    i:number = 0;
    constructor(service:myservicE) {
        seTinterval(()=> {
            service.change.emit(++this.i);
        },1000)
    }
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <h1>parent {{i}}</h1>
   <page-child></page-child>
</ion-content>

child.ts

import { Component,EventEmitter} from '@angular/core';

import{myservicE}from "../child/myservice"
@Component({
  SELEctor: 'page-child',})
export class ChildPage {

    i:number = 0;

    constructor(public service:myservicE){
        service.change.subscribe((value:number)=>{
            this.i = value;
        })
    }
    
}

child.html

<ion-content padding>
 <h2>child {{i}}</h2>
</ion-content>

结果：

7.订阅

parent.ts

import { Component } from '@angular/core';
import{myservicE}from '../child/myservice'

@Component({
  SELEctor: 'page-parent',})
export class ParentPage {
    i:number=0;
    constructor(public service:myservicE) {
        seTinterval(()=> {
             this.service.StatusMission(this.i++);
        },1000)
    }
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parent</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <h1>parent</h1>
   <page-child></page-child>
</ion-content>

child.ts

import { Component,Injectable } from '@angular/core'
import { myservice } from "../child/myservice"
import { Subscription } from 'rxjs/Subscription';
@Component({
    SELEctor: 'page-child',})
export class ChildPage {
    i:number=0;
    subscription: Subscription;
    constructor(private service: myservicE) {
        this.subscription = service.Status$.subscribe(message => {
            this.i=message;
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

child.html

<ion-content padding>
  <h2>child {{i}}</h2> 
</ion-content>

@H_255_0@myservice.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class myservice {

    private source=new Subject<any>();
    Status$=this.source.asObservable();
    StatusMission(message: any) {
        this.source.next(messagE);
    }
}

结果：

以上七种组件与组件的通讯方式，可以选择应用于适合的场景里面，根据情况吧。

此随笔乃本人原创，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

大佬总结

以上是大佬教程为你收集整理的Angular4 组件通讯方法大全全部内容，希望文章能够帮你解决Angular4 组件通讯方法大全所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：4 angular angular4 大全方法组件通讯

上一篇: Highcharts-ng动态刷新数据方法下一篇:angular 4 实战开发--安卓兼容问...

猜你在找的Angularjs相关文章

Angularjs基础(八) 2022-04-20
angularjs – 在IE9中使用Angular 2需要什么？ 2019-10-10
angularjs – $http从服务到控制器的POST响应 2019-10-10
如何使用Typescript在Angular 2中创建TreeView？ 2019-10-10
angularjs – 尝试基于常量在控制器中动态设置templateUrl 2019-10-10
angular – 在app.component.ts中导入HTTP_PROVIDERS 2019-10-10
如何使用Observable初始化Reactive Angular2表单？ 2019-10-10
angular – 使用ng2-smart-table编辑和创建 2019-10-10
angularjs – 角度组件绑定未定义 2019-10-10
angularjs – 在ui.router中只更改状态更改的一个视图？ 2019-10-10