专栏首页一只想做全栈的猫【Angular】Angula6中的组件通信

【Angular】Angula6中的组件通信

Angula6_组件通信

本文主要介绍 Angular6 中的组件通信

一、父子组件通信

1.1 父组件向子组件传递信息

方法一 在父组件上设置子组件的属性

父组件绑定信息

<app-child childTitle="可设置子组件标题"></app-child>

子组件接收消息

import { Component, OnInit, Input } from '@angular/core';
@Input childTitle: string;

方法二 父组件调用子组件的方法

父组件触发消息

<app-child #child></app-child> <button (click)="child.childPrint()"></button>

子组件接收消息

childPrint() {
  alert("来自子组件的打印");
}

1.2 子组件向父组件传递信息

方法一 使用 EventEmitter

子组件使用 EventEmitter 传递消息

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
...
@Output() initEmit = new EventEmitter<string>();
ngOnInit() {
  this.initEmit.emit("子组件初始化成功");
}
...

父组件接收消息

<app-child (initEmit)="accept($event)"></app-child>
accept(msg:string) {
  alert(msg);
}

方法二 使用 ViewChild

子组件提供传递参数的函数

sendInfo() {
  return 'Message from child 1.';
}

父组件使用 ViewChild 触发并接收信息

<button (click)="getInfo()">获取子组件1号的信息</button>
<h2>{{ info }}</h2>
import { Component, OnInit, ViewChild } from '@angular/core';
...
@ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent;
getInfo() {
  this.info = this.childcomponent.sendInfo();
}

二、非父子组件通信

方法一 service

缺点:需要双向的触发(发送信息 / 接收信息)

service.ts

import { Component, Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class myService {
  public info: string = "";
  constructor() {}
}

组件 1 向 service 传递信息

import { myService } from '../../service/myService.service';
...
constructor(
  public service: myService
) { }

changeInfo() {
  this.service.info = this.service.info + "1234";
}
...

组件 2 从 service 获取信息

import { myService } from '../../service/myService.service';
...
constructor(
  public service: myService
) { }

showInfo() {
  alert(this.service.info);
}
...

方法二 使用 BehaviorSubject

优点:真正的发布订阅模式,当数据改变时,订阅者也能得到响应

service

import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>('Start');
changemessage(message: string): void {
  this.messageSource.next(message);
}

组件调用 service 的方法传信息和接收信息

changeInfo() {
  this.communication.changemessage('Message from child 1.');
}
ngOnInit() {
  this.communication.messageSource.subscribe(Message => {
    window.alert(Message);
    this.info = Message;
  });
}

三、其他的通信方式

  1. 路由传值
  2. cookie、session、storage

参考文献《Angular6.x 学习笔记——组件详解之组件通讯》 《angular6 组件间的交流方式》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何将 GitHub 中的项目导入到 stackblitz.com 中

    如何将一个 GitHub 中的项目导入到 stackblitz.com 中,然后开始编辑和编译呢?

    HoneyMoose
  • 如何安装 Angular CLI 并且检查 CLI 的版本

    想在系统中安装 Angular CLI ,如何进行安装并且如何检查 CLI 的版本?

    HoneyMoose
  • 如何安装 Angular CLI 并且检查 CLI 的版本

    想在系统中安装 Angular CLI ,如何进行安装并且如何检查 CLI 的版本?

    HoneyMoose
  • Angular 文档中链接的修改路径 原

    左侧链接的修改路径在 angular-cn\aio\content\navigation.json 这个文件中。

    HoneyMoose
  • Angular 文档中的修改链接是从哪里改的 原

    aio\tools\transforms\templates\lib\githubLinks.html

    HoneyMoose
  • 前端新趋势,我是第一个吃螃蟹的人?

    这两年,前端圈真的很热闹,当你以为前端圈angular、react、vue等呈现三足鼎立之势时,其实冰山下面已经开始暗流涌动。当你还在为错过第三届VueConf...

    闰土大叔
  • cwiki-us-angular-app 导入后如何添加到自己的项目

    将 https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-app 导入到界面后,如何将...

    HoneyMoose
  • Angular CLI 创建你的第一个 Angular 示例程序

    你要使用 Angular CLI 来创建项目、创建应用和库代码,并执行多种开发任务,比如测试、打包和发布。

    HoneyMoose
  • Angular 文档中链接的修改路径

    左侧链接的修改路径在 angular-cn\aio\content\navigation.json 这个文件中。

    HoneyMoose
  • Angular 如何修改启动的端口

    HoneyMoose

扫码关注云+社区

领取腾讯云代金券