AngularJS 2 组件交流方式
|
以下的测试例子都可以在 github 找到，但是最近好像不太稳定。 其实 ng2 在这方面做得挺好的，用起来也很简单，所以看完基本就可以动手写一写。强大并不止是这一方面，在写这些的过程中，通过一些配置，让开发很纯粹，有时间再录一个新手入门的开发教程。 (1) 父组件向子组件流入数据这种方式是最简单的，在 基本上例子中覆盖了常见的情况：
说了这么多，来看一下实际的代码吧。 // Parent component
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-parent',templateUrl: './parent.component.html',styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
baby: string = '你的名字';
constructor() { }
ngOnInit() {
}
}
// Parent html <h3>请输入 Baby 的名字：</h3> <input [(ngModel)]="baby" type="text"> <app-child babyName="hello" [inputBabyName]="baby" aliasBabyName="我是别名"></app-child> // Child component
import { Component,OnInit,Input,SimpleChange } from '@angular/core';
@Component({
selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() babyName: string;
@Input() inputBabyName: string;
@Input('aliasBabyName') aliasName: string;
changes: string;
constructor() { }
ngOnInit() {
}
ngOnChanges(changes: SimpleChange) {
this.changes = JSON.stringify(changes);
}
}
// Child html
<h3>我是子组件的属性(babyName) => {{babyName}}</h3>
<h3 style="color:red;">我是跟父组件来：{{inputBabyName}}</h3>
<h3>我是 aliasBabyName => aliasName：{{aliasName}}</h3>
那么我需要过滤一下值要怎么弄呢？ 这样我们就可以用到 setter 和 getter 的特性来做，具体如下： // Child component
_filterName: string = '';
@Input()
set filterName(n: string) {
this._filterName = n + 'wowo~~~';
}
get filterName() {
return this._filterName;
}
// Parent html <app-child [filterName]="babyName"></app-child> 这个其实也是用 @ViewChild() 的方式 这种方式我觉得更多的是，我的沟通逻辑存在于 // Parent component
// 方式1，定义了 `#` 的钩子也是可以引用的
@ViewChild('child') cc: ChildComponent;
// 直接观察某一个子组件
@ViewChild(ChildComponent)
cc_other: ChildComponent;
// 调用的时候
this.cc.name = '变身啦！超级赛亚人';
this.cc_other.name = '变身啦！超级赛亚人 4';
(2) 子组件向父组件通信从软件的结构上来讲，是上层抽象对底层的具体实现是隐藏的，所以具体层的东西最好尽可能少的知道抽象层的事情，也许表达方式不一样，但是这样的话封闭性会好很多，更多的暴露是以某一个权限开放的接口形式。但是通信是很复杂的东西，就好像人与人之间的联系是一样的。好吧，我们来具体说一下子组件怎么访问父组件。主要通过的方式是：
// Parent component
import { Component,styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
babyName: string;
constructor() { }
ngOnInit() {
this.babyName = '小撸一号';
}
changeBabyName(newBabyName) {
this.babyName = newBabyName;
}
}
// Parent html
<h3>BabyName：{{babyName}}</h3>
<app-child (changeBabyName)="changeBabyName($event)"></app-child>
import { Component,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Output()
changeBabyName: EventEmitter<string> = new EventEmitter<string>();
rhashcode = /d.d{4}/;
constructor() { }
ngOnInit() {
}
getNewBabyName(e) {
let newName = this.makeHashCode('小撸新号');
this.changeBabyName.next(newName);
}
/* UUID http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript */
makeHashCode(prefix) {
prefix = prefix || '60sky';
return String(Math.random() + Math.random()).replace(this.rhashcode,prefix);
}
}
<button (click)="getNewBabyName($event)">我要改我自己的名字</button> 其中需要注意的是父组件中方法注入的 (3) 无关组件的通信ng2 在无关组件的处理上，真的处理得很干脆，给你一个钩子，你用吧！就是这种简单的思路。这里我只介绍部分，因为官方文档有更加详细的介绍，不然我这篇文章就写得太长了～因为方式有很多种，发挥小聪明就能发现很多。
这里介绍的是一个 // Parent component
import { Component,styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
babyName: string = '小撸一号';
constructor() { }
ngOnInit() {
}
}
// Parent html
<input [(ngModel)]="babyName" type="text">
<app-child #child [childName]="babyName"></app-child>
<app-otherChild helloBaby="child.childName"></app-otherChild>
// Child component
import { Component,Input } from '@angular/core';
@Component({
selector: 'app-child',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() childName: string;
constructor() { }
ngOnInit() {
}
}
<h3 style="color:red;">Child：{{childName}}</h3>
// OtherChild component
import { Component,Input } from '@angular/core';
@Component({
selector: 'app-otherChild',templateUrl: './otherChild.component.html',styleUrls: ['./otherChild.component.css']
})
export class OtherChildComponent implements OnInit {
@Input() helloBaby: string;
constructor() { }
ngOnInit() {
}
changeChildName(e) {
this.helloBaby = '小撸新号';
}
}
// OtherChild html
<h3 style="color:blue;">otherChild：{{helloBaby}}</h3>
<button (click)="changeChildName($event)">我来统一修改一下</button>
其实还有一些方式和特殊场景下的处理，所以总体来说，ng2 在这方面是不错的～ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |