angular组件传值服务器,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