Angular组件传参

Input

Input 是属性装饰器，用来定义组件内的输入属性。在实际应用场合，我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成，当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。

父传子

子组件 counter.component.ts

import { Component, Input } from "@angular/core";
@Component({
  selector: "exe-counter",
  template: `
    <p>当前值: {{ count }}</p>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `,
})
export class CounterComponent {
  @Input() count: number = 0;
  increment() {
    this.count++;
  }
  decrement() {
    this.count--;
  }
}

父组件 app.component.ts

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

@Component({
  selector: "exe-app",
  template: ` <exe-counter [count]="initialCount"></exe-counter> `,
})
export class AppComponent {
  initialCount: number = 5;
}

Output

子传父

子组件 counter.component.ts

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

@Component({
  selector: "exe-counter",
  template: `
    <p>当前值: {{ count }}</p>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `,
})
export class CounterComponent {
  @Input() count: number = 0;

  @Output() change: EventEmitter<number> = new EventEmitter<number>();

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

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }
}

父组件 app.component.ts

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

@Component({
  selector: "exe-app",
  template: `
    <p>{{ changeMsg }}</p>
    <exe-counter
      [count]="initialCount"
      (change)="countChange($event)"
    ></exe-counter>
  `,
})
export class AppComponent {
  initialCount: number = 5;

  changeMsg: string;

  countChange(event: number) {
    this.changeMsg = `子组件change事件已触发，当前值是: ${event}`;
  }
}