要实现在输入框中输入@后显示下拉菜单的功能，可以使用Angular的指令和事件监听。

首先，创建一个输入框组件，并在模板中添加一个输入框和一个下拉菜单。在输入框中，使用ngModel指令绑定输入的内容到一个变量。在下拉菜单中，使用ngFor指令遍历一个包含预定义选项的数组，并使用ngModel指令绑定选中的选项到另一个变量。

在组件中，可以使用HostListener装饰器监听输入框的键盘事件。当输入框中输入@字符时，触发一个方法，在该方法中设置一个布尔变量来控制下拉菜单的显示与隐藏。

以下是一个简单的示例代码：

组件模板：

  

    
{{ option }}
  

组件代码：

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

@Component({
  selector: 'app-input-dropdown',
  templateUrl: './input-dropdown.component.html',
  styleUrls: ['./input-dropdown.component.css']
})
export class InputDropdownComponent {
  inputValue: string;
  showDropdown: boolean = false;
  options: string[] = ['Option1', 'Option2', 'Option3'];

  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent) {
    // 点击页面其他地方时隐藏下拉菜单
    this.showDropdown = false;
  }

  onInputChange(event: KeyboardEvent) {
    if (event.key === '@') {
      this.showDropdown = true;
    } else {
      this.showDropdown = false;
    }
  }

  selectOption(option: string) {
    this.inputValue += option;
    this.showDropdown = false;
  }
}

在这个示例中，当输入框中输入@字符时，下拉菜单会显示出来，点击下拉菜单中的选项后，选项的内容会添加到输入框中。点击页面其他地方时，下拉菜单会隐藏起来。

请注意，这只是一个简单的示例，你可以根据自己的需求进行更多的定制和优化。