Angular中的组件

组件简介

Angular中的组件，是一个使用@component()装饰器装饰的特殊类，同时在这个装饰器中指定元数据，元数据包括组件选择器、组件模板、组件样式等。

组件是angular模块化的一个基本的组成元素。日常开发中，页面通常就是由一个或者多个组件堆叠而成。

组件的元数据中，声明了组件的渲染模板和组件样式表。在组件类中，包含了组件本身的数据以及一些前端交互逻辑，组件通过一些由属性和方法组成的 API 与视图交互。

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

@Component({
  selector: 'app-root',
  template: `
 {{ 'Hello world! '}} `,
  styles: [
    `
    h1 {
      color: green
    }
    `
  ]
})
export class AppComponent {}

组件交互

子组件通过@Input()接受父组件传递数据

在组件A中，如果有一个属性通过@Input()装饰器修饰，说明其他组件调用A组件时，可以通过数据绑定的方式进行数据的传递。

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-father',
  template: ``
})
export class FatherComponent {
	var name = '张三';
	var tellphone = '13832322077'
}

// 子组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-child',
  template: `
  
 {{ name }} 
  
 {{ tellPhone }} 
  `
})
export class ChildComponent {
	@Input() name: string;
	// @Input()中可以填一个字符串用做组件属性的别名，在父组件中也可以使用属性别名进行数据绑定
	@Input('phone') tellPhone: string; 
}

ngOnChanges()钩子来监听输入属性的的变化

ngOnChanges()是angular的一个生命周期函数，当组件中的@Input()装饰器修饰的属性值发生变化时，即调用这个函数做出响应。

子组件向上传递数据

在子组件定义一个EventEmitter属性，并通过@Output()装饰器进行修饰，当发生某一个事件时，利用这个EventEmitter属性向上层发射事件。当父组件中绑定了这个事件时，就会对该事件做出响应。

// 子组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-child',
  template: `
  
 {{ name }} 
  向上打招呼
  `
})
export class ChildComponent {
	@Input() name: string;
	@Output() sayHello: new EventEmitter<string>();
	
	onSayHello() {
    	this.sayHello.emit('Hello,' + name + '!'); // 当点击子组件中的按钮时，向父组件emit事件，并传递参数
  	}
}

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-father',
  template: ``
})
export class FatherComponent {
	var name = '张三';
	
	// 父组件接收到子组件发射的事件后，随即做出响应
	myHello(e: string){
		console.log(e);
	}
}

父组件通过本地变量或者ViewChild访问子组件的方法或者属性

在之前的开发中我通常会把这两者搞混，最近细比较下来还是有一些区别的，通过本地变量的方式，只能在父组件的模板文件中访问子组件，而ViewChild装饰器可以通过在父组件中注入子组件的方式，使得子组件的属性和方法可以在父组件的代码中被访问。

// 子组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-child',
  template: `
  
 {{ name }} 
  `
})
export class ChildComponent {
	sayHello() {
    	console.log('Hello,' + name + '!'); 
  	}
}

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-father',
  template: `
  
  
  `
})
export class FatherComponent {}

父组件在调用子组件时，通过#xxxx 的方式，可以赋予子组件一个类似别名的本地变量，这时候，就可以在父组件的模板文件中访问子组件的属性和方法。

ViewChild装饰器通过把子组件注入到父组件中，从而使父组件能够访问子组件：

// 子组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-root-child',
  template: `
  
 {{ name }} 
  `
})
export class ChildComponent {
	sayHello() {
    	console.log('Hello,' + name + '!'); 
  	}
}

// 父组件
import { Component } from '@angular/core';

import { ChildComponent } from '../app-child.childcompont'

@Component({
  selector: 'app-root-father',
  template: `
  
  
  `
})
export class FatherComponent {
	@ViewChild(ChildComponent)
	private childCom: ChildComponent;

	hello(){
		this.childCom.sayHello();
	}
}