用简单的代码描述Angular父组件，从子组件传值

对于稍微接触过Angular组件的同学来说，组件之间的交互应该没有问题。这篇文章我想追求的是用通俗的解释来帮助自己更准确的理解。零、知识铺垫CSS选择器在介绍父子组件之前，我们首先要了解一个概念——选择器，选择器当我们定义一个新的组件时，必须要有这个属性：@Component({selector:'app-village-edit',①templateUrl:'./village-edit.component.html',styleUrls:['./village-edit.component.scss']})其中①是selector，告诉其他组件，如果要调用me组件，需要使用该组件的选择器来调用。本质上，它定义了组件的HTML标签，就像常见的

标签和标签一样。一、什么是亲子成分就像现实中父母与子女的关系是相对的一样，一个人为父母承担了孩子的角色，为孩子承担了父母的角色。父子组件也是相对的。假设一个组件在自己的HTML模板中通过选择器（即特定的HTML标签）调用其他组件。我们称这个组件为父组件，被调用的组件为子组件。2、父组件调用子组件的方法定义了两个类：child.component.ts，它的selector选择器是：'app-child'parent.component.ts，它的selector选择器是：'app-parent'，此时，在父组件的HTMl中引用子组件的选择器：这样就完成了子组件的调用。此时，如果通过路由加载父组件，你会发现子组件也会渲染到特定位置。3.父组件将值传递给子组件。子组件使用@input装饰器接收数据。子组件从父组件接收到的值会保存在子组件的变量中。所以用来接收传值的变量和普通变量的唯一区别就是在普通变量上加了@input()注解。普通变量的定义是这样的：master='Master';如果是用来接收值，就改成这样：@Input()master='Master';这样，master变量默认为字符串“Master”。但是如果父组件给它传递了一个值，这个变量就变成了接收到的值。父组件使用方括号[]发送数据，以正常方式调用子组件：如果子组件可以接收数据，可以使用[propertyName]=value方法传递价值。例如：可以这样写：一旦组件被渲染，子组件中的master变量就是'hero'的值。当父组件中的变量值发生变化时，子组件也会同步变化，即子组件可以监听到传递值的变化信息。升级：子组件通过set方法监听传入的数据变化在上面的方法中，虽然可以监听传入的值是否发生变化，但是局限性在于子组件只能直接使用传入的值。如果要对传入的值进行处理或过滤，则需要对子组件稍作调整。一般情况下，子组件通过给变量加上@Input装饰器来接收参数：@Input()name='name';如果要处理参数，只需要将接收传值的变量改成set方法即可。:@Input()getname():string{returnthis._name;}setname(name:string){//这里可以添加其他处理逻辑this._name=name;}private_name='';此时，_name是一个内部变量。当父组件给name属性传入一个值时，会自动执行setname方法给_name赋值，并添加其他处理逻辑。另一个升级：子组件通过ngOnChanges()生命周期钩子监控传入的数据变化。官方文档说：“当需要监控多个交互式输入属性时，ngOnChanges()比属性设置方法更合适。"一般情况下，子组件通过给变量添加@Input装饰器来接收参数：@Input()param1='string1';@Input()param2='string2';当我们要监控多个变量变化和反应时，可以使用ngOnChanges()方法：@Input()param1='string1';@Input()param2='string2';ngOnChanges(changes:SimpleChanges){①for(constpropNameinchanges){②//通过获取变更信息变量名constchangedProp=changes[propName];//获取前一个值constfrom=JSON.stringify(changedProp.previousValue);③//获取当前值constto=JSON.stringify(changedProp.currentValue);④//可以在这里添加其他处理⑤}}①在执行ngOnChanges()方法时，可以使用一个SimpleChanges参数获取当前组件所有参数的变化②通过循环Value和current获取各个参数之前的值③获取前一个值④获取当前值⑤添加其他rprocessing根据业务逻辑处理组件传值，子组件弹出事件给父组件。刚刚讲了子组件如何获取父组件的传入变量，如何监听父组件的变化，如何处理传入的值。接下来我们会讲逆向传递：父组件如何监听子组件的变化并做出反应。像这样定义普通变量：param1='String1';如果要将这个变量暴露给父组件，需要在变量前添加@output()装饰器，并为其赋值一个变量弹射器：@Output()param1=newEventEmitter();这里EventEmitter是一个可变的弹射器，EventEmitter需要一定的类型。但是此时param1变量不能再赋等号“=”。如果想让父组件监听变化，需要使用eject方法。发出：this.param1.emit("String2");接下来，转到父组件。父组件监听到子组件弹出的事件，刚刚在子组件中设置了暴露的变量，那么父组件如何接收呢？一个普通的父组件调用一个子组件：如果要监听子组件的一个变量，可以使用括号()：$event是Angular内置的事件变量。function1是我们在父组件中定义的处理变化的方法。用法如下：function1(param2:boolean){//这个param2是我们自己定义的参数名，//本质上就是子组件中改变的param1参数，但是不需要和子组件中的参数名//这里加上处理过程即可}这时候，当param1的值发生变化时，会执行function1，传入一个事件，事件的本质就是param1参数由子组件定义。function1方法接收参数为param2并添加处理。5.小结在Angular中，HTML中选择器调用的组件称为子组件。父组件给子组件传值使用方括号[]子组件接收值有两种方式：@input+变量名，@Input+set方法子组件要给父组件传事件使用EventEmitter父组件接收events使用括号()，声明一个处理方法调用熟悉的样式，一图抵千言：6.后记有没有似曾相识的感觉？刚开始接触Angular的时候，我就知道方括号[]可以用来绑定原生HTML标签。一些属性，比如：你可以在组件中设置我的颜色！

另一方面，还有一个相似之处，Angular也使用括号()绑定原生HTML标签的某个方法，例如：点我！这些是巧合吗？并不真地。我们可以这样理解：Angular中所有原生的HTML标签都变成了组件。很多标签之所以可以用方括号[]来绑定属性，用圆括号()来绑定方法，是因为Angular为我们扩展了原生的HTML标签，使它们能够接收和发送数据！也就是说，在Angular内部的组件中，已经为我们添加了很多@input和@output装饰器，方便我们绑定这些属性和方法。