Angular 工作原理

Angular 应用，由组件构成，一颗由组件构成的树。由于组件是以树形结构组织起来的，当每个组件被渲染时，都会递归地渲染下级组件

每个组件：

1. 组件注解（@Component）
   • selector（选择器）：告诉Angular要匹配哪个HTML元素
   • template（模板）：用来定义视图
2. 视图
3. 控制器

输入输出

组件注解

Angular核心特性：输入/输出

• 方括号 [] ：传递输入。数据通过输入绑定流入你的组件
• 圆括号 () ：处理输出。事件通过输出绑定流出你的组件

@Component({
  selector: 'inventory-app',
  template: `
  <div class="inventory-app">
    <products-list 
      [productList]="products" 
      (onProductSelected)="productWasSelected($event)">
    </products-list>
  </div>
  `
})

1. 在 products-list 组件中，设置名为 productList 的输入。

   products ：希望将输入设置为 products 表达式的值，即 InventoryApp 类中的 this.products

2. (onProductSelected) ：我们要监听的输出的名称

   productWasSelected($event) ：当有新的输入时我们想要调用的方法

   $event 在此处是一个特殊的变量，用来表示输出的内容

productList 、onProductSelected 都是 products-list 组件中的变量

products 、 productWasSelected 则是当前组件的变量\函数

产品组件列表

组件的输入

可通过 inputs 配置项来指定组件希望接收哪些参数

@Input() name:string

组件的输出

要从组件中把数据传递出去，应使用 输出绑定，写法是： (output)="action"

在视图中，可以使用 (output)="action" 语法来监听事件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
	{{value}}
	<button (click)="increase()">Increase</button>
	<button (click)="decrease()">Decrease</button>
`,
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
    value: number;

  constructor() { 
      this.value = 1;
  }

  ngOnInit() {
  }

  increase() {
      this.value++;
      return false;
  }

  decrease() {
      this.value--;
      return false;
  }

}

(click) 、mousedown 等是按钮内置事件，也可触发自定义事件

EventEmitter 事件触发器

EventEmitter 只是一个帮你实现观察者模式的对象，是一个管理一系列订阅者并向其发布事件的对象

let ee = new EventEmitter();
ee.subscribe((name:string) => console.log(`Hello ${name}`));
ee.emit("Nate");
// --> "Hello Nate"

当把一个EventEmitter 赋值给一个输出的时候，Angular会自动帮我们订阅事件