Question

我用角度6创建了一个组件，其中包含有关如何实现装饰器的示例。因此，我创建了一个名为@Course的自定义装饰器，并在其中设置了一个名为Angular 6的值。现在，如何在组件的构造函数中获取该值？

我想将“ Angular 6”值记录到我的构造函数中。那怎么可能？

这是我的代码。工作良好。我有价值。但是在命令行中出现了错误

ERROR in src/app/components/decorators/decorators.component.ts(19,22): error TS2339: Property 'course' does not exist on type 'DecoratorsComponent'.

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

function Course(target) {
  Object.defineProperty(target.prototype, 'course', {
    value: () => "Angular 6"
  })
}

@Course
@Component({
  selector: 'app-decorators',
  templateUrl: './decorators.component.html',
  styleUrls: ['./decorators.component.scss']
})
export class DecoratorsComponent implements OnInit {

  constructor() {
    console.log(this.course());
  }

  ngOnInit() {
  }
}

Answer 1

target.prototype.course =（）=>'Angular 6';

Answer 2

您只需要告诉TypeScript编译器有关动态添加的属性。 The simplest way：

@Course
// ...
export class DecoratorsComponent implements OnInit {
    // ... 
    [key: string]: any;
}

或者，您将动态属性读取为“数组项”：

constructor() {

    const courseProp = this['course'];

    if (courseProp) {
        console.log(courseProp());
    }
}

注意：因为可能会删除装饰器，所以检查属性是否存在是一个好习惯。

如何在组件中使用角度6类装饰器？

2 个答案: