Angular2 组件（页面）之间如何传值

组件有两种方式将数据传递：“属性绑定”和“事件绑定”。

在Angular 2中，数据和事件变化检测从上到下发生从父级到子级。

Angular 2事件，我们可以使用DOM事件传递模型，其中事件从下到上从子到父。

因此，当涉及可撤消事件传播时，Angular 2事件可以像普通HTML DOM事件一样对待。

@Input()装饰器定义了一组可以从父组件传递的参数。
例如，我们可以修改HelloComponent组件，以便name可以由父提供。

//HelloComponent 
import { Component, Input } from '@angular/core';

@Component({
    selector: 'rio-hello',
    template: '
Hello, {{name}}!
',
})

export class HelloComponent {

    @Input() name: string;

}

//appComponent 
import {Component} from '@angular/core';

@Component({
    selector: 'app',
    template: `

        
        
      
`
})
export class App {
    helloName: string;
  
    constructor() {
        this.helloName = "World";
    }
}

执行结果如下

执行后展示的形态

@outputs 从组件发送数据，它接受组件向其父组件公开的输出参数的列表。

app/counter.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'rio-counter',
  templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
  @Input()  count = 0;
  @Output() result = new EventEmitter();

  increment() {
    this.count++;
    this.result.emit(this.count);
  }
}

---

app/counter.component.html

  
Count: {{ count }}
  Increment

---

app/app.component.ts

import { Component, OnChange } from '@angular/core';

@Component({
  selector: 'rio-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent implements OnChange {
  num = 0;
  parentCount = 0;

  ngOnChange(val: number) {
    this.parentCount = val;
  }
}

---

app/app.component.html

  Parent Num: {{ num }}

  Parent Count: {{ parentCount }}
  
  

执行结果如下

执行结果

@input + @output 绑定定义组件的公共API。在我们的模板中，我们使用 [方括号] 传递输入，使用（括号）来处理输出。

组件的要点不仅是封装，而且是可重用性。@Input()允许我们配置组件的特定实例。

@outputs 从组件发送数据，请先定义outputs属性。它接受组件向其父组件公开的输出参数的列表。

关于双向绑定

双向数据绑定使用ngModel指令将输入和输出绑定组合为单个符号。

   

//它幕后做的相当于

要创建一个支持双向绑定的组件，你必须定义一个@Output属性匹配@Input，但后缀为Change

app/counter.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'rio-counter',
  templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
  @Input() count = 0;
  @Output() countChange = EventEmitter();

  increment() {
    this.count++;
    this.countChange.emit(this.count);
  }
}

---

app/counter.component.html

  

    
    Count: {{ count }} -
    Increment
  

---

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'rio-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  number1: number;
  number2: number;
  number3: number;
  number4: number;

  constructor() {
    this.number1 = 0;
    this.number2 = 0;
    this.number3 = 0;
    this.number4 = 0;
  }

  onCountChanged(value: number) {
    this.number3 = value;
    this.number4 = value;
  }
}

---

app/app.module.ts

import { NgModule } '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CounterComponent } from './counter.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [
    AppComponent,
    CounterComponent
  ],
  exports: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

---

运行结果如下

运行结果

---

Sivona