阅读 2001

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 在此处是一个特殊的变量,用来表示输出的内容

productListonProductSelected 都是 products-list 组件中的变量

productsproductWasSelected 则是当前组件的变量\函数

产品组件列表

组件的输入

可通过 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会自动帮我们订阅事件

文章分类
前端
文章标签