angular 使用 @input、@Output 来进行父子组件之间数据的传递。

 

如下：

父元素：

 父元素标签中有一个属性是，parent_value，在子元素中可以使用该值：

this paragraph's title is from parent's(parent-root) attribute parent_value

 在子元素中，我们 p 标签的 title 属性绑定了父元素的 parent_value 属性，这里要注意了，

[title]="parent_value" 的意思并不是指 title 的值就是 "parent_value" 这个字符串，而是父元素中指定的 parent_value 属性的值。

这里，我们需要做的处理是，在子组件中，使用 @Input 去注解 parent_value 属性，指明这是一个来自父组件的元素。

 

在上面的例子中，父元素也定义了一个属性 child_emit，值是 test()，也就是说这是一个函数调用，在父元素组件中有一个 test 函数，可是我们应该怎么调用呢？我们毕竟没有 child_emit 这种事件，这时候我们就可以在子元素中触发父元素的这个 test 方法的调用。

但是首先我们先要在子元素组件中把 child_emit 使用 @Output 进行注解，然后将其值设为 new EventEmitter，当我们在子组件中去调用 child_emit 方法的时候，父元素中 child_emit 的值的方法(test)就会被调用。

 

源码如下：

child.component.ts

import {Component, EventEmitter, Input, Output} from "@angular/core";@Component({  selector: 'child-root',  template: `      
this paragraph's title is from parent's(parent-root) attribute parent_value
  点击的时候会触发父元素 example-root 的 child_emit 对应的事件  `})export class ChildComponent {  @Input()  parent_value;  @Output()  child_emit = new EventEmitter();  trigger() {    this.child_emit.emit()  }}

　　

parent.component.ts

import {Component, Output} from "@angular/core";@Component({  selector: 'example-root',  template: `        
       `,})export class ParentComponent {  @Output()  parent_value = 'value from parent';  test ()  {    console.log('call by emit at ' + new Date().toLocaleString())  }}

　　

完整源码：