判断对象是input_Angular 输入 @Input 和输出 @Output 属性

先来看一个关系图：

输入属性是一个带有@Inputs()装饰器的可设置属性。当它通过属性绑定的形式被绑定时，值会流入这个属性。
用来接收外部传入的数据，输入属性可以使得父组件可以把数据传给子组件，输入属性允许你在组件树中传递数据。

首先得先导入Input，然后使用@Input注解把外部的数据导入到紧跟着的变量，以下面组件为例：

• article组件用来显示表格里面的数据信息
• stars推荐组件是article的子组件

Angular 应用

articles的数据结构

// articles.component.ts
this.articles = [
      new Article(1,'Drupal的安装', 'CaoYu', 'http://zhoabg.com', 'Drupal的安装和初始化',5, ['Drupal8','安装']),
      new Article(2,'View视图的配置', 'JiaMing', 'http://zhoabg.com', 'View视图的安装和使用',4, ['Drupal8','views']),
      new Article(3,'模块的安装和使用', 'Johnson', 'http://zhoabg.com', '模块的安装和使用',2, ['Drupal8','模块']),
      new Article(3,'Drush常用命令', 'TangYu', 'http://zhoabg.com', 'Drush常用的命令都有哪些',3, ['Drupal8','Drush'])
    ]
// stars.component.ts
import { Component, Input, OnInit } from "@angular/core";

export class StarsComponent implements OnInit {
  /**
   * 推荐指数的数据应该从父组件的循环接收数据，决定显示几颗星星
   * 要想从外部接收数据需要添加@Input(),说明数据是从外部输入进来的
   */

  /**
   * @Input 注解后面紧跟的变量就是外部输入进来的，
   * 外部模板中也要绑定这个输入[rating]="article.star"
   */
  @Input()
  rating:number = 0;

  stars:boolean[];
  constructor() { }

  ngOnInit() {
    // 先初始化数组，不然会报错没有 push 方法
    this.stars = [];
    for (let i = 1; i <= 5; i++){
    /**
     * 根据 rating 传进来的值判断返回 true 或 false并填入数组
     * 再根据数组的值显示推荐指数
     */
      this.stars.push(i > this.rating)
    }
  }

}

父组件articles传入值：

// 循环中把每一项的star变量赋值给rating
<app-stars [rating]="article.star"></app-stars>

Angular IDE 提示

当你在app-stars绑定的时候IDE已经为你做好绑定的提示了。总结：子组件@input声明好接受的输入变量，在父组件中把实例变量赋值给输入变量，然后在子组控制器中显示变量。

Angular 组件树

数据流向

属性绑定自上而下，事件绑定刚好相反。

Angular 数据流向

输出属性是一个带有@output装饰器的可观察对象型的属性。这个属性几乎总是返回Angular的事件绑定，当它通过的形式被绑定时，值会流出这个属性。

输出属性是定义一些其他组件可能感兴趣的事件，或者组件间共享数据。

你只能通过它的输入和输出属性将其绑定到其他组件。