面试题：Angular组件的输入输出属性

定义输入（@Input()）属性

在Angular组件中，使用@Input()装饰器来定义输入属性。它允许父组件向子组件传递数据。

例如，创建一个名为child.component.ts的子组件：

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

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

在child.component.html模板中可以使用这个输入属性：

<p>Received data from parent: {{ dataFromParent }}</p>

在父组件的模板（假设为parent.component.html）中使用子组件并传递数据：

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

在parent.component.ts中定义parentData：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentData = 'Hello from parent';
}

定义输出（@Output()）属性

使用@Output()装饰器来定义输出属性，用于子组件向父组件发送事件。

继续以上面的child.component.ts为例，修改为：

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

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

  sendEvent() {
    this.childEvent.emit('Event from child');
  }
}

在child.component.html模板中添加一个按钮来触发事件：

<button (click)="sendEvent()">Send Event</button>

在父组件的模板（parent.component.html）中监听子组件的事件：

<app-child (childEvent)="handleChildEvent($event)"></app-child>

在parent.component.ts中定义handleChildEvent方法：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  handleChildEvent(eventData: string) {
    console.log('Received event from child:', eventData);
  }
}

星途面试题库

面试题：Angular组件的输入输出属性

知识考点

面试题答案

定义输入（@Input()）属性

定义输出（@Output()）属性