第三章 Angular工作原理

应用

一个angular应用其实就是一棵由组件构成的树，在这棵树的根节点，最顶层的组件就是应用本身，它会在浏览器启动应用的时候被渲染。即：应用只是一个会渲染其它组件的组件。

数据模型

不要求使用指定的数据模型库。

组件

每个组件都由三部分组成：组件注解，视图，控制器。

1. @Component：给紧随其后的类添加元数据。

• selector:选择器，用来告诉Angular要匹配哪个HTML元素。
• template：视图，是一个组件中可视的部分。用来定义组件所用到的HTML模板。如果希望把模板放到一个单独的文件中，可以将组件的template配置项改为templateUrl，把配置的内容设置为模板文件名即可。

输入、输出

• 方括号[]用来传递输入。圆括号（）用来传递输出。
• 数据通过输入绑定流入组件，事件通过输出绑定流出组件。

<product-list
  	[productList]="products"            
      (onProductSelected)="productWasSlected($event)"  >
</product-list>

左边的[productList]是指希望在product-list组件中设置名为productList的输入。

右边的products是指将输入设置为products表达式的值。

(onProductSelected)是指要监听ProductList组件的productWasSlected($event)输出。

左边的(onProductSelected)代表要监听的输出的名称。

右边的productWasSlected代表当有新的输入时我们想要调用的方法。

$event表示一个特殊的变量，用来表示输出的内容。

输入

两种方式：通过inputs配置项。通过@Input注解。

1. inputs配置项：通过配置项来指定组件希望接收哪些参数。接收一个字符串数组，用来指定输入的键。

@Component({
    selector: 'my-component',
    inputs: ['name', 'age']
})

2. @Input()注解：指定组件接收输入参数。需要先导入Input，然后把@Input（）添加到属性声明上。

class MyComponent {
  @Input() name :string;
  @Input() age:number;
}

输出

如果要从组件中把数据传递出去，应该使用输出绑定。(output) = "action"

自定义输出：

• 在@Component配置中，指定outputs配置项。
• 在实例属性中，设置一个EventEmitter事件触发器。
• 在适当的时候，通过EventEmitter触发事件。

@Component({
  selector: 'single-component',
  outputs: ['putRingOnIt'],
  template: `
	<button (click)="liked()">Like it? </button>
`
})

class SingComponent{
  putRingOnIt: EventEmitter<string>;
  
  constructor(){
    this.putRingOnIt = new EventEmitter();
  }
  
  liked(): void{
    this.putRingOnIt.emit("oh  oh  oh");
  }
}

在父级组件中使用这个输出

@Component({
  selector: 'club',
  template: `
	<div>
			<sing-component 
					(putRingOnIt)="ringWasPlaced($event)">
			</sing-component>
	</div>
`
})

class ClubComponent {
   ringWasPlaced(message: string){
    console.log(`put your hands up : $ {message} `)
   }
}