博客
关于我
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中json_extract的使用方法
    查看>>
    mysql中kill掉所有锁表的进程
    查看>>
    mysql中like % %模糊查询
    查看>>
    MySql中mvcc学习记录
    查看>>
    mysql中null和空字符串的区别与问题!
    查看>>
    MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
    查看>>
    MYSQL中TINYINT的取值范围
    查看>>
    MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
    查看>>
    Mysql中varchar类型数字排序不对踩坑记录
    查看>>
    MySQL中一条SQL语句到底是如何执行的呢?
    查看>>
    MySQL中你必须知道的10件事,1.5万字!
    查看>>
    MySQL中使用IN()查询到底走不走索引?
    查看>>
    Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
    查看>>
    MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
    查看>>
    mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
    查看>>
    mysql中出现Unit mysql.service could not be found 的解决方法
    查看>>
    mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
    查看>>
    Mysql中各类锁的机制图文详细解析(全)
    查看>>
    MySQL中地理位置数据扩展geometry的使用心得
    查看>>
    Mysql中存储引擎简介、修改、查询、选择
    查看>>