组件简介
Angular中的组件，是一个使用@component()装饰器装饰的特殊类，同时在这个装饰器中指定元数据，元数据包括组件选择器、组件模板、组件样式等。
组件是angular模块化的一个基本的组成元素。日常开发中，页面通常就是由一个或者多个组件堆叠而成。
组件的元数据中，声明了组件的渲染模板和组件样式表。在组件类中，包含了组件本身的数据以及一些前端交互逻辑，组件通过一些由属性和方法组成的 API 与视图交互。
import {
Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1> {
{ 'Hello world! '}} </h1>`,
styles: [
`
h1 {
color: green
}
`
]
})
export class AppComponent {
}
组件交互
子组件通过@Input()接受父组件传递数据
在组件A中，如果有一个属性通过@Input()装饰器修饰，说明其他组件调用A组件时，可以通过数据绑定的方式进行数据的传递。
// 父组件
import {
Component } from '@angular/core';
@Component({
selector: 'app-root-father',
template: `<app-root-child [name]="name" [phone]="tellphone"></app-root-child>`
})
export class FatherComponent {
var name = '张三';
var tellphone = '13832322077'
}
// 子组件
import {
Component } from '@angular/core';
@Component({
selector: 'app-root-child',
template: `
<h1> {
{ name }} </h1>
<h1> {
{ tellPhone }} </h1>
`
})
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: `
<h1> {
{ name }} </h1>
<button nz-button (click)="onSayHello()">向上打招呼</button>
`
})
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: `<app-root-child [name]="name" (sayHello)="myHello($event)"></app-root-child>`
})
export class FatherComponent {
var name = '张三';
// 父组件接收到子组件发射的事件后，随即做出响应
myHello(e: string){
console.log(e);
}
}
父组件通过本地变量或者ViewChild访问子组件的方法或者属性
在之前的开发中我通常会把这两者搞混，最近细比较下来还是有一些区别的，通过本地变量的方式，只能在父组件的模板文件中访问子组件，而ViewChild装饰器可以通过在父组件中注入子组件的方式，使得子组件的属性和方法可以在父组件的代码中被访问。
// 子组件
import {
Component } from '@angular/core';
@Component({
selector: 'app-root-child',
template: `
<h1> {
{ name }} </h1>
`
})
export class ChildComponent {
sayHello() {
console.log('Hello,' + name + '!');
}
}
// 父组件
import {
Component } from '@angular/core';
@Component({
selector: 'app-root-father',
template: `
<button (click)="child.sayHello()"></button>
<app-root-child #child></app-root-child>
`
})
export class FatherComponent {
}
父组件在调用子组件时，通过#xxxx 的方式，可以赋予子组件一个类似别名的本地变量，这时候，就可以在父组件的模板文件中访问子组件的属性和方法。
ViewChild装饰器通过把子组件注入到父组件中，从而使父组件能够访问子组件：
// 子组件
import {
Component } from '@angular/core';
@Component({
selector: 'app-root-child',
template: `
<h1> {
{ name }} </h1>
`
})
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: `
<button (click)="hello()"></button>
<app-root-child></app-root-child>
`
})
export class FatherComponent {
@ViewChild(ChildComponent)
private childCom: ChildComponent;
hello(){
this.childCom.sayHello();
}
}