介绍
这篇文章主要介绍角组件的交互方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<>强角组件交互
<强>组件交互:强组件通讯,让两个或多个组件之间共享信息。
<强>使用场景:当某个功能在多个组件中被使用到时,可以将该特定的功能封装在一个子组件中,在子组件中处理特定的任务或工作流。
<强>交互方式:
<李> 方式1:通过<代码> @Input 和<代码> @Output 装饰器进行交互。
<李> 方式2:通过<代码>服务进行交互。
相关教程推荐:《角教程》
<人力资源/> <强>把数据从父组件传到子组件
通过输入型绑定将数据从父组件传到子组件。
输入属性是一个带有@Input装饰器的可设置属性。
当它通过属性绑定的形式被绑定时,值会“流”入这个属性。
部分代码示例如下:
import {组件的不同之处是,Input },得到& # 39;@angular/核心# 39;;
@ component ({
,,选择器:& # 39;app-selector& # 39;
模板:,才能
,,,//,模板代码
的才能
})
export class TestComponent {
@Input才能(),英雄:,英雄;
@Input才能(& # 39;主# 39;),masterName:,字符串;
} 上述例子中包含两个输入型属性,第二个@Input为子组件的属性名masterName指定一个别名主人。
在父组件中引用子组件,部分代码示例如下:
,,,,& lt; app-hero-child * ngFor=發et hero of heroes"
,,,,,(英雄),=,“hero"
,,,,,(主),=,“master"比;
,,,& lt;/app-hero-child> <人力资源/> <强>监听输入属性值的变化
<强>(1)使用setter方法
使用一个输入属性的setter()方法,已拦截父组件中值的变化,并采取行动。
部分代码示例如下:
export class TestComponent {
@Input ()
set 名称(名称:字符串),{//,逻辑处理
}
} <>强(2)使用ngOnChanges()方法
使用onchange生命周期钩子接口的ngOnChanges()方法来监听输入属性值的变化并做出回应。
<强>注:当需要监视多个,交互式输入属性时,本方法比用属性的setter方法更合适。
在子组件中从@angular/核心导入输入,onchange和SimpleChange
import {,组件,输入,,onchange,, SimpleChange },得到& # 39;@angular/核心# 39;;
@ component ({
,,选择器:& # 39;app-version-child& # 39;
模板:,才能//才能,模板代码
的才能
})
export class ChildComponent implements OnChanges {
@Input才能(),主要:,数量;
@Input才能(),小:,数量;
ngOnChanges才能(变化:,{,[propKey: string]:, SimpleChange }), {
,,,for (let propName 改变拷贝),{
,,,,,//,propName为输入属性的名字
,,,,,let changedProp =,改变[propName];,//, changedProp为SimpleChange对象
,,,,,//,其它代码
,,,}
,,}
} <>强SimpleChange类强源代码如下:
/* *
,* Represents a basic change 得到a previous 用a new value for a 单身
,* property 提醒a directive 实例只Passed as a value 拷贝
,* {@link SimpleChanges}, object 用,ngOnChanges的钩。
,*
,* @see “onchange”
,*
,* @publicApi
,*/export declare class SimpleChange {
,,,previousValue:,任何;
,,,currentValue:,任何;
,,,firstChange:,布尔;
,,,构造函数(previousValue:,,, currentValue:,,, firstChange:,布尔型);
,,,/* *
,,,,*,Check whether 从而new value is 从而first value 分配。
,,,*/,,,isFirstChange():,布尔;
} <人力资源/> <强>父组件监听子组件的事件
子组件暴露一个EventEmitter属性,当事件发生时,子组件利用该属性排放(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。
子组件的EventEmitter属性是一个输出属性,通常带有@Output装饰器。
——角组件之间的交互
<人力资源/> <强>父组件和子组件通过服务进行通讯
父组件和它的子组件共享同一个服务,利用该服务在组件家族内部实现双向通讯。
