【Angular4】基础（四）：组件通讯(@Input和@Output)

男娘i 2022-05-30 05:24 185阅读 0赞

#### 组件通讯有两种方式： ####

*  父到子（用@Input装饰器）
 *  子到父（用@Output装饰器）

**注意：** 输入输出针对的对象 是 父子组件

#### 1）父到子 ####

父到子的数据传递其实就是通过将子组件上的一个属性绑定到父组件的一个属性上，一般我们使用@Input()属性装饰器来实现。

###### 动手操作实例一： ######

*  新建项目 `connInComponents`：`ng new connInComponents`
 *  新增组件 `stock`：`ng g c stock`
 *  在 `stock.component.ts` 中新增属性 `stockName` 并将其标记为 `@Input()`：

@Input() protected stockName: string;

*  既然有 `@Input()` 则应有对应的父组件，此处使用默认生成的主组件 `app`  
    在父组件中定义属性 `keyWork` 并通过视图文件 `app.component.html` 中的标签 `<input>` 来进行双向绑定，最后在视图文件 `app.component.html` 中嵌入子组件并进行赋值：

// app.component.ts
    protected keyWord: string;
    
    // app.component.html
    <input type="text" placeholder="请输入股票名称" [(ngModel)]="keyWord">
    <app-stock [stockName]="keyWord"></app-stock>

**注意：**`[(ngModel)]` 需要在 `app.module.ts` 中引入模块 `FormsModule`

这样就完成了父组件向子组件赋值的操作了

在子组件中进行展示

<p> stock works! </p> <div> 股票名称：{ { stockName}} </div>

###### 动手操作实例二： ######

*  新建项目 `countDemo`：`ng new countDemo`
 *  新增组件 `counter`：`ng g c counter`

// counter.component.ts @Input() count: number = 0; increment() { this.count++; } decrement() { this.count--; } // counter.component.html <p>当前值：{ { count}}</p> <button (click)="increment()"> + </button> <button (click)="decrement()"> - </button>

// app.component.ts
    initialCount: number = 5;
    
    // app.component.html
    <app-counter [count]="initialCount"></app-counter>

###### 动手操作实例三： ######

*  新建项目 `countDemo`：`ng new countDemo`
 *  新增组件 `counter`：`ng g c counter`

// counter.component.ts
    @Input() content: string;
    
    // counter.component.html
    Child: {
       {content}}

// app.component.ts
    i: number = 0;
    constructor() { setInterval(() => { this.i++; }, 1000) } // app.component.html <h2>Parent</h2> <app-counter [content]="i"></app-counter>

###### 小结（父到子）： ######

*  子组件  
    
    
     *  @Input() 定义一个输入
 *  父组件  
    
    
     *  使用子组件中定义的@Input()

如果不理解上述例子如何绑定的话请看我前一篇博客 基础（三）：数据绑定

#### 2）子到父 ####

使用EventEmitter从子组件向外发射事件

> 不懂EventEmitter是什么？  
> 请跳转：[Node.js EventEmitter][]

###### 动手操作： ######

*  新建项目 `countDemo`：`ng new countDemo`
 *  新增组件 `counter`：`ng g c counter`

// counter.component.ts
    @Output() changeNumber: EventEmitter<number> = new EventEmitter();
    Number: number = 0;
    constructor() { setInterval(() => { this.changeNumber.emit(++this.Number); }, 1000);
    }
    
    // counter.component.html 这里不用更改

// app.component.ts i: number = 0; numberIChange(i:number) { this.i = i; } // app.component.html <h2>Parent: { { i}}</h2> <app-counter (changeNumber)="numberIChange($event)"></app-counter>

###### 小结（子到父）： ######

*  子组件  
    
    
     *  @Output() 定义一个输出
     *  写一个自定义方法，通过emit，触发@Output
 *  父组件  
    
    
     *  使用子组件中定义的@Output()
     *  $event必须，$event是父组件通过emit传过来的

通过 **子组件的输入输出属性** 和 **父组件的属性绑定和事件绑定** 可以实现父子组件之间的数据传递

> 注：只有第一个例子写的比较详细，后面几个因为差不多所以不做过多解释，如还有疑惑请留言。

[Node.js EventEmitter]: http://www.runoob.com/nodejs/nodejs-event.html