社区首页 >专栏 >Angular2 组件（页面）之间如何传值

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

用户1437675

发布于 2018-08-20 03:04:06

4K00

代码可运行

文章被收录于专栏：Angular&服务Angular&服务

运行总次数：0

代码可运行

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

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

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

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

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

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

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

export class HelloComponent {

    @Input() name: string;

}

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

@Component({
    selector: 'app',
    template: `<div>
        <hello [name]="helloName"></hello>
        <hello name="beijing"></hello>
      </div>`
})
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<number>();

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

app/counter.component.html

<div>
  <p>Count: {{ count }}</p>
  <button (click)="increment()">Increment</button>
</div>

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

<div>
  Parent Num: {{ num }}<br>
  Parent Count: {{ parentCount }}
  <rio-counter [count]="num" (result)="ngOnChange($event)">
  </rio-counter>
</div>

执行结果如下

执行结果

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

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

<!-- 绑定到原始字符串 -->
<rio-hello name="World"></rio-hello>
<!-- 绑定到父作用域 -->
<rio-hello [name]="helloName"></rio-hello>

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

关于双向绑定

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

<input [(ngModel)]="name" >   

//它幕后做的相当于

<input [ngModel]="name" (ngModelChange)="name=$event">

要创建一个支持双向绑定的组件，你必须定义一个@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<number>();

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

app/counter.component.html

<div>
  <p>
    <ng-content></ng-content>
    Count: {{ count }} -
    <button (click)="increment()">Increment</button>
  </p>
</div>

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 {
}