关于Angular和React在 组件化 编程的思考 Part1

起因

由于笔者在React和Angular项目之间交替coding，还时不时交叉着Vue，造成“框架混乱综合症🤪”。于是今天斗胆尝试了一下写一个新的Angular项目代码时，充分利用React函数式组件编程的思路，在Angular中实现的场景，梳理一下知识点，并记录遇到的问题。（老板思维：工作量还不饱和？）

1. 组件交互(实现react一样的组件自定义后，子组件能够轻易获取到父组件中的值)

In React
//father component function
function FatherComponent() {
	...
	return(
		<ChildComponent value="react-value"/>
	)
}

//child component function
// function ChildComponent(props) {
	console.log(props.value); // 这里就可以很轻松的拿到父组件的值啦！实现了父组件的值传递给子组件的功能，还能传函数方法，对象等。
}

In angular
// father.component.ts
value = "angular-value" //首先父组件里定义这个要传递的值

// father.component.html
<app-child-page [getvalue]="value"/> //父组件去把value值从ts中拿到，然后绑定到getvalue上。
									//注意这里的“value”不是字符串，而是ts文件中的value = “angular-value” 这个值。

// child.component.ts
//子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。
@Input() getvalue: string; // 这里的getvalue的值就是angular-value。  

//child.component.html
{{getvalue}}.              // 也可以通过 子组件 的文本插值看到结果

2. 已知子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。那么问题来了，什么是装饰器？

装饰器是ES7新语法，后端也称之为“注解”，是设计模式中装饰者模式的一种实现。

装饰器实际上就是一种更加简洁的代码书写方式。
从代码表现来理解，就是使用闭包和高阶函数扩展或者修改了原来的表现；
从功能角度来理解，达到了不修改内部实现的前提下动态扩展和修改类定义的目的。

3. 已知@Input() 装饰器可以从其父组件中获取值，那么问题又来了，能不能获取对象，函数方法等？（其实我也不知道，但是我觉得应该可以，不然也太鸡肋了…于是我就去试了试。）

// father.component.ts
testFun(){
  console.log("test function");
} 
objValue(){
  name:"zhangsan",
  age:18,
}


// father.component.html
<app-child-page [getfun]="testFun" [getobj]="objValue"/> 

// child.component.ts
//子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。
@Input() getfun: any; 
@Input() getobj: any; 

this.getfun();
console.log(this.getobj);