时间戳

首页 > 解决方案 > 输入、输出装饰器作为指令元数据

angular - 输入、输出装饰器作为指令元数据

问题描述

我试图将@Inputand@Output指令作为组件元数据（而不是将它们放在组件类中）。您可以参考以下文档链接以查看我想要实现的目标。

声明输入和输出属性

但是，当我尝试这样做时，我收到了以下错误，

“HeroComponent”类型上不存在属性“deleteRequest”。

这是我的StackBlitz fiddle 供参考。

有人可以在这里阐明吗？

标签： angulartypescript

解决方案

您可以省略 的导入和使用，@Input/@Output但您仍然必须声明一个变量才能使用它。

堆栈闪电战

import { Component, EventEmitter } from '@angular/core';
import { Hero } from '../app/hero'

@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
  selector: 'hero',
  template: 
  `
    <div>
      <pre>{{hero | json}}</pre>
      <button (click)="deleteRequestInit()">Get</button>
    </div>
  `
})

export class HeroComponent {

  public hero: Hero;
  public deleteRequest: EventEmitter<any> = new EventEmitter<any>();

  public deleteRequestInit(): void {
    this.deleteRequest.emit({'message': 'Are you sure you want to delete this record!.'})
  }
}

推荐阅读