这几天在学习 angular 的组件间通讯,篇幅挺长的。
一、输入属性
这里以主组件(AppComponent)和子组件(GoodsComponent)为例。
输入属性是一个单向绑定,父组件向子组件传值,可改变子组件里面的值,而子组件自身改变值的时候,父组件则不受影响。
父组件中的控制器代码:
import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { private search: string; constructor() { } }
父组件中的模板代码:
<div> <input placeholder="请输入搜索关键字" [(ngModel)]="search"> </div> <app-goods [keyword]="search"></app-goods>
子组件中接收传值的控制器代码:
import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-goods', templateUrl: './goods.component.html', styleUrls: ['./goods.component.css'] }) export class GoodsComponent implements OnInit { @Input() private keyword: string; constructor() { } ngOnInit() { /** * 在子组件中定时改变 keyword 的值,却不影响父组件 */ setInterval(() => { this.keyword = 'IBM'; }, 3000); } }
子组件中的模板代码:
<p> goods works! </p> <p> 您搜索商品的关键字是:{{keyword}} </p>
二、输出属性
继续用上两个组件,现在反过来,由子组件向父组件传值
父组件中的控制器代码:
import {Component} from '@angular/core'; import {GoodsInfo} from "./goods/goods.component"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { private search: string; private price: number; constructor() { } searchResultHandler(goodsInfo: GoodsInfo) { this.price = goodsInfo.price; } }
父组件中的模板代码:
<div> <input placeholder="请输入搜索关键字" [(ngModel)]="search"> </div> <p> 您搜索商品的关键字是:{{search}},它的价格是:{{price | number:'2.2-2'}} </p> <app-goods [keyword]="search" (searchResult)="searchResultHandler($event)"></app-goods>
子组件中接收传值的控制器代码:
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; @Component({ selector: 'app-goods', templateUrl: './goods.component.html', styleUrls: ['./goods.component.css'] }) export class GoodsComponent implements OnInit { @Input() private keyword: string; private price: number; // 向父组件发射 @Output() searchResult: EventEmitter<GoodsInfo> = new EventEmitter(); constructor() { } ngOnInit() { setInterval(() => { // 随机产生价格 let goodsInfo: GoodsInfo = new GoodsInfo(this.keyword, 100 * Math.random()); this.price = goodsInfo.price; this.searchResult.emit(goodsInfo); }, 3000); } } export class GoodsInfo { constructor(public name: string, public price: number) { } }
子组件中的模板代码:
<p> goods works! </p> <p> 您搜索商品的关键字是:{{keyword}},它的价格是:{{price | number:'2.2-2'}} </p>
另外 Output 这里可以改变输出的接收名,比如:
// 向父组件发射 @Output('lastPrice') searchResult: EventEmitter<GoodsInfo> = new EventEmitter();
那么父组件的接收端这里就要改成:
<app-user-search [keyword]="search" (lastPrice)="searchResultHandler($event)"></app-user-search>
转载请注明:隨習筆記 » Angular笔记:组件间通讯