标签: angular2-decorators

我是角色的新手,我有以下情况,即我有一个服务getAnswers():Observable<AnswerBase<any>[]>和两个相互关联的组件.

• 网上报价
• 动态形式

online-quote组件getAnswers():Observable<AnswerBase<any>[]>在其ngOnInit()方法中调用服务,并将其结果传递给组件dynamic-form.

为了说明这种情况,这是我的两个组件的代码:

在线quote.component.html:

 <div>
    <app-dynamic-form [answers]="(answers$ | async)"></app-dynamic-form>
</div>

在线quote.component.ts:

@Component({
  selector: 'app-online-quote',
  templateUrl: './online-quote.component.html',
  styleUrls: ['./online-quote.component.css'],
  providers:  [DynamicFormService]
})
export class OnlineQuoteComponent implements OnInit {

  public answers$: Observable<any[]>;

  constructor(private service: DynamicFormService) {

   }

  ngOnInit() {
    this.answers$=this.service.getAnswers("CAR00PR");
  }

}

动态form.component.html:

<div *ngFor="let answer of answers">
 <app-question *ngIf="actualPage===1" [answer]="answer"></app-question>
</div>

动态form.component.ts:

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
  providers: [ AnswerControlService ]
})
export class DynamicFormComponent implements OnInit { …

我试图找出如何访问selector我们传递给 @Component装饰器的内容.

例如

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
     // I was hoping for something like the following but it doesn't exist
     this.component.selector // my-component
  }
}

最后,我想使用它来创建一个自动添加属性的指令,data-tag-name="{this.component.selector}"以便我可以使用Selenium查询通过其选择器可靠地找到我的角度元素.

我没有使用量角器

I'm学习角和I'm与新太打字稿,所以我的问题是:为什么在组件或指令做的元数据或装饰有这样的"@"符号@Component/ @Directive.

它的目的是什么,我什么时候应该使用它？

从官方文档我们知道

组件装饰器允许您将类标记为Angular组件,并提供其他元数据,以确定如何在运行时处理,实例化和使用组件.

但我想更深入地了解组件装饰器除了提供额外的元数据之外真正做了什么.

我潜入了源代码,发现所有装饰器都是在makeDecorator函数的帮助下创建的.在这里,我迷路了.Component和ngModule装饰器的示例区别在哪里？他们做同样的事吗？不要这么认为.

就像一个答案一样,如果没有makeDecorator函数重新创建Component Decorator,我需要一步一步地描述我应该做些什么.

UPD:是的,当然,我知道TypeScript Decorators是如何工作的.

Angular组件有装饰器:

@Component({ ... })
export class MyAngularComponent {
  @Input() myInputParam: MyType;
  @Input() myOtherInputParam: MyOtherType;
  @Output() myOutputParam: MyOtherOutputType;
}

我有一个Angular库,如果我能以编程方式检索@Input()给定组件类(虽然属于库)中的 Angular的装饰器,可以避免很多代码重复(并减少bundle大小).

但我怀疑这种实现的可移植性.我已经读过某个地方,如果Angular应用程序是在启用了AoT的情况下构建的(并且只使用了Angular装饰器),则不需要Reflect polyfill(在运行时读取装饰器所需).所以我认为我不能只使用Reflect.*.Angular如何存储装饰器？是否有可靠,面向未来的方式来阅读它们？

缩小应该不是问题,因为它只用于读取库组件的装饰器,所以我可以控制它.

所以,如果这是可行的方式(或者不是,我仍然感兴趣),我怎么能读取那些装饰器？

我想使用@HostListener 的捕获阶段。

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log("key pressed");
  }

上面的代码使用默认值（气泡相）。我想使用捕获阶段的情况之一，请帮助我，如何使用@HostListener的捕获阶段。

我是新来学习Angular的人。我在angular.io上学习了angular的装饰器。关于@Attribute装饰器的信息不多。请任何人给我一些用例。

我目前正在使用 TypeScript 运行 Angular 2 演示。有两个文件：作为模板导入的 index.html 文件和 TypeScript 文件。TypeScript 文件编译为pomodoro-timer.js，对于这个演示，所有的类都包含在一个文件中：

番茄计时器

import {
    Component,
    Input,
    Pipe,
    PipeTransform,
    Directive,
    OnInit,
    HostListener
} from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

/// Model interface 
interface Task {
    name: string;
    deadline: Date;
    queued: boolean;
    pomodorosRequired: number;
}

/// Local Data Service
class TaskService {
    public taskStore: Array<Task> = [];

constructor() {
    const tasks = [
        {
            name: "Code an HTML Table",
            deadline: "Jun 23 2015",
            pomodorosRequired: 1
        },
        {
           name: …

我正在尝试创建一些包装 Angular2 装饰器的功能。我想简化向主机添加 CSS 类的过程，因此我创建了以下内容：

警告：不适用于 AOT 编译

type Constructor = {new(...args: any[]): {}};

export function AddCssClassToHost<T extends Constructor>(cssClass: string) {
    return function (constructor: T) {
        class Decorated extends constructor {
            @HostBinding("class") cssClass = cssClass;
        }
        // Can't return an inline class, so we name it.
        return Decorated;
    };
}

我还希望能够创建另一个添加特定 CSS 类的装饰器。

/**
 * Decorator to be used for components that are top level routes. Automatically adds the content-container class that is
 * required so that the main content …

有没有办法在 Angular 2 中使用装饰器获取所有组件或指令属性@Input？