这篇文章主要介绍角中组件间通讯的实现方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<>强角组件间的通讯
<人力资源/>
组件间三种典型关系:
<李> 父好组件之间的交互(@Input/@Output/模板变量/@ViewChild)
<李> 非父子组件之间的交互(服务/localStorage)
<李> 还可以可以利用会话,路由参数来进行通讯等
相关教程推荐:《角教程》
<强>父子组件之间交互
<强>子组件编写
<李> child.component.ts
@ component ({
,,选择器:& # 39;app-child& # 39;
templateUrl才能:& # 39;。/child.component.html& # 39;
,,styleUrls: [& # 39;。/child.component.css& # 39;】
})
export class ChildComponent implements OnInit {
private 才能;_childTitle =, & # 39;我是子组件& # 39;;
@Input才能()
set 才能childTitle (childTitle:字符串),{
,,,this._childTitle =, childTitle;
,,}
get 才能childTitle ():, string {
,,,return this._childTitle;
,,}
@Output才能()
,,messageEvent: EventEmitter,=, new EventEmitter ();
构造函数(),才能{,}
ngOnInit才能():,void {
,,}
,,sendMessage (): void {
,,,this.messageEvent.emit(& # 39;我是子组件& # 39;);
,,}
childFunction才能():,void {
,,,console.log(& # 39;子组件的名字是:& # 39;,+,this.childTitle);
,,}
} <李> child.component.html
& lt; div 类=皃anel panel-primary"比;
& lt;才能div 类=皃anel-heading"在{{childTitle}} & lt;/div>
& lt;才能div 类=皃anel-body"比;
,,,,,& lt; button (点击)=皊endMessage()“,类=癰tn btn-success"在给父组件发消息& lt;/button>
& lt;才能/div>
& lt;/div> <强>父组件
<李> parent-and-child.component.ts
@ component ({
,,选择器:& # 39;app-parent-and-child& # 39;
templateUrl才能:& # 39;。/parent-and-child.component.html& # 39;
,,styleUrls: [& # 39;。/parent-and-child.component.css& # 39;】
})
export class ParentAndChildComponent implements OnInit {
构造函数(),才能{,}
ngOnInit才能():,void {
,,}
doSomething才能(事件:任何):,void {
,,,警报(事件);
,,}
} <李> parent-and-child.component.html
& lt; div 类=皃anel panel-primary"比;
& lt;才能div 类=皃anel-heading"在父组件& lt;/div>
& lt;才能div 类=皃anel-body"比;
,,,& lt; app-child # child (messageEvent),=,“doSomething(事件)美元“祝辞& lt;/app-child>
,,,& lt; button (点击)=癱hild.childFunction()“,类=癰tn btn-success"在调用子组件的方法& lt;/button>
& lt;才能/div>
& lt;/div> @Input属性绑定是单向的,父组件的属性变化会影响子组件的属性变化,子组件的属性变化不会反过来影响父组件的的属性变化。
不过,可以利用@Input()和@Output()实现属性的双向绑定。
@Input ()
值:,字符串;
@Output ()
valueChange: EventEmitter <强>注意:使用<代码> (())进行双向绑定时,输出属性名必须是输入属性名与改变组成,形如:xxxChange。
非父子组件之间交互
<强>使用服务进行交互
<李> event-bus.service。李ts
/* *
,*用于充当事件总线
,*/@Injectable ()
export class EventBusService {
,,evnetBus: Subject,=, new Subject ();
构造函数(),才能{,}
} <李> child1.component.ts
