组件简介

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();}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！