博客
关于我
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 日期时间类型的选择
    查看>>
    Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
    查看>>
    MySQL 是如何加锁的?
    查看>>
    MySQL 是怎样运行的 - InnoDB数据页结构
    查看>>
    mysql 更新子表_mysql 在update中实现子查询的方式
    查看>>
    MySQL 有什么优点?
    查看>>
    mysql 权限整理记录
    查看>>
    mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
    查看>>
    MYSQL 查看最大连接数和修改最大连接数
    查看>>
    MySQL 查看有哪些表
    查看>>
    mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
    查看>>
    MySql 查询以逗号分隔的字符串的方法(正则)
    查看>>
    MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
    查看>>
    mysql 查询数据库所有表的字段信息
    查看>>
    【Java基础】什么是面向对象?
    查看>>
    mysql 查询,正数降序排序,负数升序排序
    查看>>
    MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
    查看>>
    mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
    查看>>
    mysql 死锁(先delete 后insert)日志分析
    查看>>
    MySQL 死锁了,怎么办?
    查看>>