要监听子组件的输出，可以使用Angular中的@Output装饰器和EventEmitter类。下面是一个示例代码：

在子组件中，定义一个输出属性，并使用@Output装饰器将其标记为输出属性：

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

@Component({
  selector: 'app-child',
  template: `发送消息`
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from child component!');
  }
}

在父组件中，使用子组件的标签，并在该标签上使用事件绑定来监听子组件的输出：

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

@Component({
  selector: 'app-parent',
  template: `
    
    
收到的消息：{{message}}
  `
})
export class ParentComponent {
  message: string;

  receiveMessage($event: string) {
    this.message = $event;
  }
}

在父组件中，定义一个接收消息的方法，并在该方法中将接收到的消息赋值给父组件的一个变量。

这样，当子组件中的按钮被点击时，子组件会通过messageEvent输出属性发出一个事件，父组件通过事件绑定的方式监听到这个事件，并调用receiveMessage方法来接收子组件传递的消息，并将其赋值给message变量。最后，在父组件的模板中显示接收到的消息。

注意：在父组件中监听子组件的输出之前，需要在父组件的模块文件中导入子组件。