Angular组件之间通讯
|
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild) 2非父子组件(Service/localStorage) 3还可以利用Session等服务器端的解决方法 Angular组件间通讯方法：1、父子组件之间的通讯
@Output：是事件绑定，子组件向父组件传递数据的同时触发事件 1.1在父组件设置子组件上面的的属性 通过@input绑定子组件的属性,注意属性得是公开public的,私有private属性是无法传递的 es6新语法get/set.为属性提供了一个方便习惯的读/写方式,拦截属性的存取行为。 在父组件设置该属性,就能够通过set方法来修改,从而实现在父组件设置子组件属性 子组件 import { Component,OnInit,Input } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">app-child<span style="color: #800000">'<span style="color: #000000">,template: <span style="color: #800000">'<span style="color: #800000"> {{childTitle}}<span style="color: #800000">'<span style="color: #000000">}) export <span style="color: #0000ff">class<span style="color: #000000"> ChildComponent implements OnInit { <span style="color: #0000ff">private _childTitle: <span style="color: #0000ff">string = <span style="color: #800000">'<span style="color: #800000">子组件标题<span style="color: #800000">'<span style="color: #000000">; @Input() constructor() { } ngOnInit() { } 父组件 import { Component,OnInit } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">app-parent<span style="color: #800000">'<span style="color: #000000">,templateUrl: <span style="color: #800000">'<span style="color: #800000"> parent-and-child works! <span style="color: #800000">'<span style="color: #000000">}) export <span style="color: #0000ff">class<span style="color: #000000"> ParentAndChildComponent implements OnInit { constructor() { } ngOnInit() { } } 1.2父组件直接调用子组件的方法 通过模板内部定义子组件变量,在父组件上可以直接调用子组件的方法,如下: 子组件 import { Component,templateUrl: child workngOnInit() {
} childPrint() { } } 父组件 import { Component,templateUrl: parent-and-child works!
constructor() { }
ngOnInit() { } } 1.3父组件接受子组件派发的事件 通过@Output在子组件绑定一个事件发射器,在父组件通过事件绑定监听该事件 这样在子组件派发一个事件,父组件就能够收到 子组件 import { Component,Output,EventEmitter} @Component({
selector: <span style="color: #800000">'<span style="color: #800000">app-child<span style="color: #800000">'<span style="color: #000000">,templateUrl: <span style="color: #800000">'<span style="color: #800000"> child work <span style="color: #800000">'<span style="color: #000000">}) export <span style="color: #0000ff">class<span style="color: #000000"> ChildComponent implements OnInit { @Output() constructor() { } ngOnInit() { 父组件 import { Component,EventEmitter } @Component({
selector: <span style="color: #800000">'<span style="color: #800000">app-parent<span style="color: #800000">'<span style="color: #000000">,templateUrl: <span style="color: #800000">'<span style="color: #800000"> parent-and-child works! <app-child (initEmit)="accept($event)"><span style="color: #800000">'<span style="color: #000000">}) export <span style="color: #0000ff">class<span style="color: #000000"> ParentAndChildComponent implements OnInit { constructor() { } ngOnInit() { } 2、没有直接关系的组件 2.1service
2.2路由传值 对于2个不同路由的组件,我们也可以通过路由传递信息 假设2个路由分别为~/home,~/about 2.2.1传递一个值 url: /about/:id 获取传入的值： this.id = this.route.snapshot.params['id']; 2.2.2传递一个对象 类似于上述的传递一个值,但是不需要再路由末尾加上/:id url: /about this.route.queryParams.subscribe((params: Params)=>{ this.id = params['id']; this.status = params['status']; })
3.1localstorage处理
1存储空间有限 2只能存储字符串 ,JSON.stringify({ key: ,value: getData() {
<span style="color: #0000ff">var json = window.localStorage.getItem(<span style="color: #800000">"<span style="color: #800000">test<span style="color: #800000">"<span style="color: #000000">); <span style="color: #0000ff">var obj =<span style="color: #000000"> JSON.parse(json); console.log(obj.key); console.log(obj.value); }
也可以在服务端来处理组件间的通讯问题,通过接口调用存储或获取数据 转自：https://www.cnblogs.com/banluduxing/p/9290569.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |