译文 | Angular中的AoT编译( 三 ) _组件

// ...var currVal_6 = this.context.newName;if (import4.checkBinding(throwOnChange, this._expr_6, currVal_6)) {this._NgModel_5_5.model = currVal_6;if ((changes === null)) {(changes = {});}changes['model'] = new import7.SimpleChange(this._expr_6, currVal_6);this._expr_6 = currVal_6;}this.detectContentChildrenChanges(throwOnChange);// ...
假设的值是3 ，的值是1 ，我们来跟踪看看这个方法的执行。对于这样的一个调用 .(1, 3) ，在生产环境下，执行的是下面的检查：
1 === 3 || typeof 1 === 'number' && typeof 3 === 'number' && isNaN(1) && isNaN(3);
上述表达式返回false ，因此我们将把变化保持下来，以及直接更新的属性 model 的值，在这之后，方法会被调用，它将为整个模板内容的子级调用 l 。一旦指令发现了 model 属性发生了变化，它就会（几乎）直接调用渲染器来更新对应的DOM元素。
目前为止，我们还没有碰到任何特殊的，或者特别复杂的逻辑。
属性
也许你已经注意到了在内部访问了 this. 属性。
译者：指的前一小节的 {}{} 函数
中的是这个组件的控制器的实例，例如这样的一个组件：
@Component({selector: 'hero-app',template: '{{ hero.name }}'})class HeroComponent {hero: Hero;}
this. 就是 new () ，这意味着如果在 l 中我们需要访问 this..name 的话，就带来了一个问题：如果我们使用AoT模式编译组件的模板，由于这个模式会生成代码，因此我们要确保在组件的模板中只访问 this. 中的成员。这是为何？由于的类属性有访问控制，强制类外部只能访问类（及其父类）中的成员，因此在内部我们无法访问 this. 的任何私有成员。因此，下面这个组件：
@Component({selector: 'hero-app',template: '{{ hero.name }}'})class HeroComponent {private hero: Hero;}
以及这个组件
class Hero {private name: string;}@Component({selector: 'hero-app',template: '{{ hero.name }}'})class HeroComponent {hero: Hero;}
在生成出来的 *..ts 中，都会抛出编译错误。第一个组件代码，无法访问到在类中被声明为的 hero 属性。第二个组件代码中，无法访问到 hero.name 属性，因为它在 Hero 类中被声明为。
AoT与封装
好吧，我们只能在组件模板中绑定属性，以及调用方法。但是，如何确保组件的封装性？在开始的时候，这可能不是一个大问题，但是想象一下下面这个场景：