在父指令和子指令之间传递参数

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

@Component({
  selector: 'parent-directive',
  template: `
    <child-directive [message]="parentMessage"></child-directive>
  `
})
export class ParentDirective {
  parentMessage = "Hello from parent directive!";
}

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

@Component({
  selector: 'child-directive',
  template: `
    <p>{{ message }}</p>
  `
})
export class ChildDirective {
  @Input() message: string;
}

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

@Component({
  selector: 'parent-directive',
  template: `
    <child-directive (countChange)="onCountChange($event)"></child-directive>
    <p>Count: {{ count }}</p>
  `
})
export class ParentDirective {
  count: number;

  onCountChange(count: number) {
    this.count = count;
  }
}

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

@Component({
  selector: 'child-directive',
  template: `
    <button (click)="increaseCount()">Increase Count</button>
  `
})
export class ChildDirective {
  @Output() countChange = new EventEmitter<number>();
  count = 0;

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