面试题：Angular属性绑定与事件绑定的基本应用

Question

请简述Angular中属性绑定和事件绑定的语法，并且举例说明如何在一个组件中，通过属性绑定将父组件的数据传递给子组件，以及如何通过事件绑定让子组件向父组件传递数据。

Answer 1

属性绑定语法

在Angular中，属性绑定使用方括号 [] 来实现。语法为 [目标属性]="表达式"。其中，目标属性是要绑定到的DOM元素或组件的属性，表达式通常是组件类中的属性或方法调用。

例如，将一个组件的 name 属性绑定到 div 元素的 innerHTML 属性：

<div [innerHTML]="name"></div>

事件绑定语法

事件绑定使用圆括号 () 来实现。语法为 (事件)="表达式"。这里的事件是DOM元素或组件触发的事件，表达式通常是组件类中的方法调用。

例如，为按钮的 click 事件绑定一个方法 onClick()：

<button (click)="onClick()">点击我</button>

通过属性绑定将父组件数据传递给子组件

1. 子组件定义输入属性：在子组件的类中使用 @Input() 装饰器来定义一个输入属性。

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() dataFromParent: string;
}

2. 父组件使用子组件并传递数据：在父组件的模板中使用子组件，并通过属性绑定传递数据。

<app-child [dataFromParent]="parentData"></app-child>

在父组件的类中定义 parentData 属性：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentData = '这是来自父组件的数据';
}

通过事件绑定让子组件向父组件传递数据

1. 子组件定义输出事件：在子组件的类中使用 @Output() 装饰器和 EventEmitter 来定义一个输出事件。

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() dataToParent = new EventEmitter<string>();

  sendData() {
    const data = '这是来自子组件的数据';
    this.dataToParent.emit(data);
  }
}

2. 父组件监听子组件事件：在父组件的模板中使用子组件，并通过事件绑定监听子组件的事件。

<app-child (dataToParent)="handleChildData($event)"></app-child>

在父组件的类中定义 handleChildData() 方法来处理子组件传递的数据：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  handleChildData(data: string) {
    console.log('接收到子组件的数据:', data);
  }
}