Question

示例中的

文件app.component.ts：https://angular.io/resources/live-examples/toh-1/ts/plnkr.html如下：

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

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

现在，我们在AppComponent中设置title的值，它显示在@Component的模板中。那么，想知道它是如何可能的？

Answer 1

@Component()是一个装饰器，直接应用于装饰器后面的类，成员或变量。因此，因为@Component()装饰器紧接在class AppComponent()之前，它被应用于此类。

template: '...'中的表达式在它们应用的类的范围内进行评估。因此title引用title

中的AppComponent字段

Answer 2

正如Günter所说，这是一个装饰师。另外一点是，装饰器使用(require 'org-expiry) (add-hook 'org-after-todo-state-change-hook (lambda () (when (string= org-state "TODO") (save-excursion (org-back-to-heading) (org-expiry-insert-created)))))使用Reflect Metadata lbrary自动在关联类上设置一些元数据。元数据对应于您设置为装饰器的参数（ComponentMetadata类型）。

使用组件时，Angular2将查找此类注释以了解如何使用/配置组件。

AngularJs 2中AppComponent和@Component之间的连接是什么？

2 个答案: