####组件间通讯
1.组件间通讯 。
父组件向子组件输入属性用
1
| <app-order [stockCode]="stock" [amount]="100"></app-order>
|
子组件声明接收父组件的属性@input()注解
1
2
| @Input()
amount: number;
|
2.组件输出属性
1.在发射的组件内部定义发射的EventEmitter对象
1
2
| @Output()
lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
|
2.在发射组件里 将要发射的变量发射出去 ，注意类型必须和定义里的泛型一致
1
2
| let pq = new PriceQuote(this.stockCode, Math.random() * 100);
this.lastPrice.emit(pq);
|
3.在发射组件标签声明的地方加上监听该emitEvent对象传过来的事件
1
| <app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
|
然后父组件里就可以写，事件就是发射过来的值
1
2
3
| priceQuoteHandler(priceQuote) {
this.priceQuote = priceQuote;
}
|
注意想监听事件的名字即不是lastPrice 只要在output里改即可
但是这样有感觉很麻烦，能不能用双向绑定
还有注意 如果一个属性想用双向绑定 那么如果输入属性为rating ，并且想在标签上[(rating)]，获取输出值那么在组件内的输出属性 名称必须为ratingChange ，加个Change
1
2
| @Output()
private ratingChange: EventEmitter<number> = new EventEmitter();
|
####管道
普通应用，这个使用可以去查官网
1
2
| <p>{{birthday | date : 'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{pi | number: '2.2-4'}}</p>
|
自定义管道需命令行生成 ng g pipe name
管道和组件一样需申明在NgModule里
1
2
3
| declarations: [
FilterPipe
],
|
自定义管道
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(list: any[], filterField: string, keyword: string): any {
if (!filterField || !keyword) {
return list;
}
return list.filter( item => {
let fieldVaule = item[filterField];
return fieldVaule.indexOf(keyword) >= 0;
});
}
}
|
####如何在父组件中调用子组件的方法
子组件就一个gretting的方法
1
2
3
4
| 父组件html代码
<app-children #child1></app-children>
<app-children #child2></app-children>
<button (click)="child2.gretting('jsex')">hahah1</button>
|
父组件ts代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import { Component, OnInit, ViewChild} from '@angular/core';
import {ChildrenComponent} from './children/children.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit,{
@ViewChild('child1')
child1: ChildrenComponent;
greeting: string = 'heelo';
ngOnInit(): void {
this.child1.gretting(this.greeting);
}
}
|
1.在ts中调用子组件方法
html里
1
| <app-children #child1></app-children>
|
ts里
1
2
| @ViewChild('child1')
child1: ChildrenComponent;
|
父组件ts任意地方就可以
1
| this.child1.gretting(this.greeting);
|
2.在html里调用子组件api
1
2
| <app-children #child2></app-children>
<button (click)="child2.gretting('jsex')">hahah</button>
|