1、@Input:可设置属性

     当它通过属性绑定的形式被绑定时,值会“流入”这个属性。

     在子组件中使用,例如:@Input()name:string

     父组件定义宾亮,并在父组件的模板中绑定,例如:

      子组件模板中:{{name}}

      子组件控制器中:@Input()name:string

      父组件控制器中:username = "Lion"

      父组件模板中:[name] = "username" (在调用的子组件的选择器中绑定)

     此时,数据即从父组件传入子组件,子组件能在本身的模板中使用改“name”变量

2、@Output:可观察对象型属性

     几乎总是返回Angular 的EventEmitter,当它通过事件绑定的形式被绑定时,值会“流出”这个属性

     在子组件中使用。例如:@Output() arriveMessage = new EventEmitter()

     子组件模板中绑定一个事件,例如按钮的点击事件(click()),在子组件控制器中定义一个被绑定到按钮点击事件的事件(message()),并在该事件中做出处理,即emit(弹射)例中的arriveMessage,在父组件的模板中绑定arriveMessage,绑定位置为子组件的选择器位置,最后 在父组件的控制器中进行事件处理(footerArriveMessage())

     例如:

     子组件模板:(click) = "message()"

     子组件控制器:@Output() arriveMessage = new EventEmitter()

            message(){

              ..............

              this.arriveMessage.emit();

            }

     父组件模板:(arriveMessage) = "footerArriveMessage()"

     父组件控制器中:footerArriveMessage(){

              进行处理

            }

3、子组件与子组件之间通过中间人模式实现通讯(需要有一个共同的父组件)

4、子组件与子组件之间通过服务来实现组件之间的通讯(没有共同父组件)

5、父组件与子组件通过本地变量互动

     在父组件的模板中使用,即在爱组件的选择器中声明一个本地变量(#变量名)例如:#name,该变量名即可代表子组件,之后可在父组件模板中调用子组件的属性和方法

     例如:

      (click) = "name.属性" 或 (click) = "name.方法"

     缺陷:

        父子组建的连接必须全部在父组件的模板中进行,在父组件的控制器中无法访问子组件的属性和方法

6、父组件调用@ViewChild()

总结:

  @Input:在子组件中使用。数据从父组件传递到子组件

  @Output:在子组件中使用。子组件的元素事件(例如:点击事件)的处理函数发射出父组件的自定义事件,触发自定义事件,父组件执行函数处理该自定义事件。

  局部变量实现数据交互:在父组件中使用。父组件在局部模板中自定义一个局部变量,形如#····。通过局部变量访问子组件的公共变量和方法。局限是只能在局部模板中使用,不能在父组件的类中对子组件的相关变量和方法进行修改。

  @ViewChild:在父组件中使用。通过此方法实现的数据交互,可以对子组件的相关变量和方法进行修改。

     

Angular学习笔记之组件之间的交互的更多相关文章

  1. Angular 学习笔记——自定义指令之间的交互

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  2. Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

    更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...

  3. angular学习笔记 父子组件传值

    一.如何将父组件的值传到子组件? 在子组件里面引入Input,然后用@Input 变量1 接收 接着在父组件中的,子组件标签上添加[msg]="msg",中括号里的名字要与子组件中 ...

  4. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  5. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  6. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  7. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  8. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  9. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

随机推荐

  1. xcopy语法

    xcopy语法 2007-02-09 13:29:45| 分类: 服务器 | 标签:xcopy语法 |字号 订阅复制文件和目录,包括子目录. 语法 xcopySource [Destination] ...

  2. HLSL学习笔记(一):基础

    http://www.cnblogs.com/rainstorm/archive/2013/05/04/3057444.html 前言 五一在家无事,于是学习了一下HLSL,基于XAN4.0的.学习完 ...

  3. 随机数 while循环 do while循环 for循环

    1.随机数   arc4random()    返回一个随机数 如果要随机[a,b]范围内的随机数   arc4random() % (b - a + 1) +  a ; 2.break  跳出本次循 ...

  4. ASP.NET Core 中文文档 第四章 MVC(2.2)模型验证【转载】

    http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_2_2-validation.html 介绍模型验证 在一个应用程序将数据存储到数据库之前,这个应 ...

  5. tar压缩解压缩

    Linux下的tar压缩解压缩命令详解tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以 ...

  6. 16_点击事件第三种写法_activity实现接口

    第一种写法是有名内部类,第二种写法是匿名内部类,第三种写法是MainActivity实现接口OnClickListener.直接让MainActivity实现了OnClickListener这个接口. ...

  7. Java之反射(部分文档摘过来方便以后查看)

    第1章 类加载器 1.1 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. l 加载 就是指将class文件读入内存,并为之创建 ...

  8. C# 生成chm帮助文件

    引用博友的博客地址,里面有详细资料,谢谢博主分享 http://blog.csdn.net/snakorse/article/details/44963015

  9. 子元素应该margin-top影响父元素的解决办法

    在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...

  10. 多个VSTO解决方案间传输变量

    参照微软官方文档,为需要公开参数的解决方案添加公开接口.不过稍显遗憾的是,不能传输List泛型 https://docs.microsoft.com/zh-cn/visualstudio/vsto/c ...