zoukankan      html  css  js  c++  java
  • angular2组件通讯的几种方式

    最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978;

    1.通过输入型绑定把数据从父组件传到子组件

    HeroChildComponent 有两个输入型属性,它们通常带@Input装饰器

    第二个@Input为子组件的属性名masterName指定一个别名master,父组件HeroParentComponent把子组件的HeroChildComponent放到*ngFor循环器中,把自己的master字符串属性绑定到子组件的master别名上,并把每个循环的hero实例绑定到子组件的hero属性。

    2.通过setter截听输入属性值的变化

    使用一个输入属性的setter,以拦截父组件中值的变化,并采取行动。(注意是输入型属性)

    子组件NameChildComponent的输入属性name上的这个setter,会trim掉名字里的空格,并把空值替换成默认字符串。

     下面的NameParentComponent展示了各种名字的处理方式,包括一个全是空格的名字。

    运行结果:

    3.通过ngOnChanges来截听输入属性值的变化

    使用OnChanges生命周期钩子接口的ngOnChanges方法来监测输入属性值的变化并做出回应。(当需要监视多个、交互式输入属性的时候,本方法比用属性的setter更合适)

    这个VersionChildComponent会监测输入属性majorminor的变化,并把这些变化编写成日志以报告这些变化。

    VersionParentComponent提供minormajor值,把修改它们值的方法绑定到按钮上。

    这样子便能实现组件间的通讯

    4.父组件监听子组件的事件

    子组件暴露一个EventEmitter属性,当事件发生时,子组件利用该属性emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。

    子组件的EventEmitter属性是一个输出属性,通常带有@Output装饰器,就像在VoterComponent中看到的。

    点击按钮会触发truefalse(布尔型有效载荷)的事件。

    父组件VoteTakerComponent绑定了一个事件处理器(onVoted),用来响应子组件的事件($event)并更新一个计数器。

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

    父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里,新建一个本地变量来代表子组件,然后利用这个变量来读取子组件的属性和调用子组件的方法,如下例所示。

    子组件CountdownTimerComponent进行倒计时,归零时发射一个导弹。startstop方法负责控制时钟并在模板里显示倒计时的状态信息。

    让我们来看看计时器组件的宿主组件CountdownLocalVarParentComponent

    父组件不能通过数据绑定使用子组件的startstop方法,也不能访问子组件的seconds属性。

    把本地变量(#timer)放到(<countdown-timer>)标签中,用来代表子组件。这样父组件的模板就得到了子组件的引用,于是可以在父组件的模板中访问子组件的所有属性和方法。

    在这个例子中,我们把父组件的按钮绑定到子组件的startstop方法,并用插值表达式来显示子组件的seconds属性。

    6.父组件调用ViewChild

    这个本地变量方法是个简单便利的方法。但是它也有局限性,因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。

    如果父组件的类需要读取子组件的属性值或调用子组件的方法,就不能使用本地变量方法。

    当父组件类需要这种访问时,可以把子组件作为ViewChild,注入到父组件里面。

    我们将会用同一个倒计时范例来解释这种技术。我们没有改变它的样子或行为。子组件CountdownTimerComponent也和原来一样。

    由本地变量切换到ViewChild技术的唯一目的就是做示范。

    下面是父组件CountdownViewChildParentComponent:

    把子组件的视图插入到父组件类需要做一点额外的工作。

    需要通过ViewChild装饰器导入这个引用,并挂上AfterViewInit生命周期钩子。

    通过@ViewChild属性装饰器,将子组件CountdownTimerComponent注入到私有属性timerComponent里面。

    组件元数据里就不再需要#timer本地变量了。而是把按钮绑定到父组件自己的startstop方法,使用父组件的seconds方法的插值表达式来展示秒数变化。

    这些方法可以直接访问被注入的计时器组件。

    ngAfterViewInit生命周期钩子是非常重要的一步。被注入的计时器组件只有在Angular显示了父组件视图之后才能访问,所以我们先把秒数显示为0.

    然后Angular会调用ngAfterViewInit生命周期钩子,但这时候再更新父组件视图的倒计时就已经太晚了。Angular的单向数据流规则会阻止在同一个周期内更新父组件视图。我们在显示秒数之前会被迫再等一轮。

    使用setTimeout来等下一轮,然后改写seconds方法,这样它接下来就会从注入的这个计时器组件里获取秒数的值。

    7.父组件和子组件通过服务来通讯

    父组件和它的子组件共享同一个服务,利用该服务在家庭内部实现双向通讯。

    该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。

    这个MissionServiceMissionControlComponent和多个AstronautComponent子组件连接起来。

    MissionControlComponent提供服务的实例,并将其共享给它的子组件(通过providers元数据数组),子组件可以通过构造函数将该实例注入到自身。

    AstronautComponent也通过自己的构造函数注入该服务。由于每个AstronautComponent都是MissionControlComponent的子组件,所以它们获取到的也是父组件的这个服务实例。

    注意,通过subscription服务订阅任务,并在AstronautComponent被销毁的时候退订。这是一个用于防止内存泄漏的保护措施。实际上,在这个应用程序中并没有这个风险,因为AstronautComponent的生命期和应用程序的生命期一样长。但在更复杂的应用程序环境中就不一定了。

    不需要在MissionControlComponent中添加这个保护措施,因为作为父组件,它控制着MissionService的生命期。

  • 相关阅读:
    js内置数据类型
    vue禁止复制的方式
    阻止element组件中的<el-input/>的粘贴功能
    Vue插件集合
    qs.parse()、qs.stringify()、JSON.stringify() 用法及区别
    es6数组的一些函数方法使用
    文章段落首字母缩进两个字符
    深圳scala-meetup-20180902(3)- Using heterogeneous Monads in for-comprehension with Monad Transformer
    深圳scala-meetup-20180902(2)- Future vs Task and ReaderMonad依赖注入
    深圳scala-meetup-20180902(1)- Monadic 编程风格
  • 原文地址:https://www.cnblogs.com/shitoupi/p/6622690.html
Copyright © 2011-2022 走看看