博客
关于我
Angular开发(六)-关于组件之间的数据交互
阅读量:143 次
发布时间:2019-02-26

本文共 3168 字,大约阅读时间需要 10 分钟。

在angular组件中数据交互主要有下面几种

  • 1、父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件
  • 2、父组件通过局部变量获取子组件的引用
  • 3、父组件使用@ViewChild获取子组件的引用
  • 4、两个不相关联的组件使用中间人模式交互
  • 5、终极大招:创建一个服务注入到组件中
  • 6、直接把父组件当做服务注入到子组件中

一、通过输入与输出属性进行传递进行组件之间数据交互

//父组件html
  • { {item.name}}----{ {i+1}}--{ {item.id}}
  • //父组件ts文件dataSet = [ { "id":0,"name":"张三"}, { "id":1,"name":"李四"}, { "id":2,"name":"王五"}, ] bar(event:any){ console.log(event); }//子组件html代码//子组件ts文件export class ChildComponent implements OnInit { @Input() names:any = {} //定义一个输出的 @Output() foo = new EventEmitter
    () todo(event:any){ this.foo.emit('你好'); } constructor() { } ngOnInit() { }}

    子组件中通过emit将要传递出去的参数传递给父组件,父组件中就可以获取到

    二、使用局部变量获取子组件的引用

    在angular中使用局部模板变量可以获取到子组件的实例引用

    模板局部变量的定义是使用#name

    //父组件html代码
  • //使用模板局部变量调用子类的方法
  • //父组件的ts代码dataSet = [ { "id":0,"name":"张三"}, { "id":1,"name":"李四"}]//子组件的ts代码@Input() names: any = {}childFn(){ console.log("我是子类的方法");}//子组件的html代码{ {names.name}}

    三、使用@ViewChild获取子组件的引用

    这种方法跟使用模板局部变量一样的,都是在父组件中调用子组件的方法

    子组件跟上面方法一样的

    //父组件ts文件dataSet = [    {  "id":0,"name":"张三"},    {  "id":1,"name":"李四"}  ]  //@ViewChild(子组件名称)  随便命名:子组件名称  @ViewChild(ChildComponent) child:ChildComponent;  father(){    //调用子组件方法    this.child.childFn();  }//父组件html代码
  • 四、使用中间人模式

    中间人模式就是第一种方式的改版,如果两个组件没有父子关系,那么久查找他们共同的父组件,我们知道angular是有一个根组件组成的组件树,那么至少有根组件可以使用的。

    项目文件结构
    现在要实现从组件com1点击按钮传递参数到组件com2
    具体代码如下:

    //com1组件html代码

    我是com1组件

    //com1组件ts代码//创建一个输出@Output()outcom1Fn = new EventEmitter
    ();com1Fn(){ this.outcom1Fn.emit("我是com1组件的");}//根组件作为中间者模式代码//中间者ts文件private com1Tocom2;//根组件作为中间者appFn(event:any){ console.log(event); this.com1Tocom2 = event;}//中间者html代码
    //com2组件ts代码@Input() com2:string = "";//com2组件的html代码

    我是com2组件

    我是com1组件传递过来的:{ {com2}}

    五、终极大招:创建一个服务注入到组件中()

    总结说明:angular项目有时候运行没效果,自己觉得代码没错,那么请重启下服务

    六、补充说明

    在父组件传递数据到子组件中,子组件接受数据,可以对其接收的数据进行处理后再显示在页面中,这里就要用到setget方法

    //父组件ts文件,传递一个parent给子组件data:string = "parent";//父组件html代码
    //子组件ts文件export class Comdemo01Component implements OnInit {     _input: string;  @Input()  public set input(v: string) {    this._input = v.toUpperCase();//转换大写输出    console.log(v);  }  public get input(): string {    return this._input;  }  constructor() {  }  ngOnInit() {  }}//子组件html代码I am fron {  {input}}

    七、直接将父组件当做服务注入到子组件中

    //父组件ts文件import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-father1',  templateUrl: './father1.component.html',  styleUrls: ['./father1.component.css']})export class Father1Component implements OnInit {     constructor() { }  public name:string = "我是父组件的名字";  public dataSet:Array
    = [ { "id":"0","name":"张三"}, { "id":"1","name":"李四"}, { "id":"2","name":"王五"} ] ngOnInit() { }}
    //子组件ts文件import { Component, OnInit } from '@angular/core';import {Father1Component} from "app/father1/father1.component";@Component({  selector: 'app-child1',  templateUrl: './child1.component.html',  styleUrls: ['./child1.component.css']})export class Child1Component implements OnInit {     constructor(private father1:Father1Component) { }  ngOnInit() {  }}
    //子组件html代码

    { { father1.name}}

    • { { item.name}}
    你可能感兴趣的文章
    mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
    查看>>
    mysql 数据库备份及ibdata1的瘦身
    查看>>
    MySQL 数据库备份种类以及常用备份工具汇总
    查看>>
    mysql 数据库存储引擎怎么选择?快来看看性能测试吧
    查看>>
    MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
    查看>>
    MySQL 数据库的高可用性分析
    查看>>
    MySQL 数据库设计总结
    查看>>
    Mysql 数据库重置ID排序
    查看>>
    Mysql 数据类型一日期
    查看>>
    MySQL 数据类型和属性
    查看>>
    mysql 敲错命令 想取消怎么办?
    查看>>
    Mysql 整形列的字节与存储范围
    查看>>
    mysql 断电数据损坏,无法启动
    查看>>
    MySQL 日期时间类型的选择
    查看>>
    Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
    查看>>
    MySQL 是如何加锁的?
    查看>>
    MySQL 是怎样运行的 - InnoDB数据页结构
    查看>>
    mysql 更新子表_mysql 在update中实现子查询的方式
    查看>>
    MySQL 有什么优点?
    查看>>
    mysql 权限整理记录
    查看>>