typescript – AngularJs 2中AppComponent和@Component之间的连

发布时间：2020-12-17 17:16:30 所属栏目：安全来源：网络整理

导读：示例中的文件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{{titl

示例中的文件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的模板中.那么,想知道它是如何可能的？

解决方法

@Component()是一个装饰器,直接应用于装饰器之后的类,成员或变量.因此,因为@Component()装饰器紧跟在AppComponent()类之前,所以它被应用于此类.

模板中的表达式：’…’在它们应用的类的范围内进行评估.因此,title指的是AppComponent中的title字段

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!