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

在Angular框架中，父指令和子指令之间传递参数可以通过输入和输出属性实现。

输入属性（@Input）：父指令可以通过输入属性将数据传递给子指令。在子指令中，通过使用@Input装饰器来定义输入属性，并指定属性名称。父指令可以通过绑定语法将数据传递给子指令的输入属性。

例如，定义一个父指令和一个子指令，父指令传递一个名为"message"的字符串给子指令：

父指令：

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

在上述例子中，父指令通过绑定语法[message]="parentMessage"将parentMessage的值传递给子指令的输入属性message。子指令通过插值表达式{{ message }}来显示接收到的值。

输出属性（@Output）：子指令可以通过输出属性将数据传递给父指令。在子指令中，通过使用@Output装饰器和EventEmitter来定义输出属性，并指定属性名称。子指令可以通过调用EventEmitter的emit方法触发事件，并将数据传递给父指令。

例如，定义一个父指令和一个子指令，子指令通过点击按钮触发事件，并将一个名为"count"的数字传递给父指令：

父指令：

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);
  }
}

在上述例子中，子指令通过点击按钮触发increaseCount方法，并通过this.countChange.emit(this.count)将count的值传递给父指令的输出属性countChange。父指令通过绑定语法(countChange)="onCountChange($event)"监听子指令的输出属性，并在onCountChange方法中接收传递的值，并将其赋值给count属性。

通过使用输入和输出属性，父指令和子指令之间可以方便地传递参数和数据，实现组件之间的通信。