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

你可能感兴趣的:(angular,javascript,前端,angular)