AngularJS迁移至Angular5：$scope替换为this的组件实现疑问

在Angular 5中，我们不再依赖$scope来管理组件数据，而是直接在组件类中定义属性，模板会自动绑定到组件实例（也就是代码里this对应的对象）。针对你的卡片组件迁移需求，具体实现步骤如下：

1. 修改card.component.ts，定义组件属性 #

直接在CardDemoComponent类中声明vmOptions属性并初始化——可以在类的顶部直接赋值，也可以在ngOnInit钩子中完成初始化，两种方式都能满足需求：

import { Component, OnInit } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';

@Component({
  selector: 'card-demo',
  templateUrl: './card.component.html'
})
export class CardDemoComponent implements OnInit {
  // 声明并初始化vmOptions，对应原AngularJS中的$scope.vmOptions
  vmOptions = { location: 'http://www.google.com' };

  constructor() { }

  ngOnInit() {
    // 如果需要异步初始化（比如从服务获取数据），也可以在这里赋值
    // this.vmOptions = { location: 'http://www.google.com' };
  }
}

2. 更新card.component.html模板绑定 #

在Angular模板中，你可以直接引用组件类中定义的公共属性，不需要额外的$scope前缀。同时，Angular推荐使用属性绑定语法([href]="...")替代插值表达式({{...}})，这种方式更安全（能防范XSS风险），也更符合Angular的最佳实践：

<h2>Card Component</h2>
<rt-card testId="test-card">
  <rt-card-title>Lorem ipsum dolor sit amet</rt-card-title>
  <rt-card-content>Lorem ipsum dolor sit amet</rt-card-content>
  <rt-card-footer>
    <!-- 使用属性绑定语法，直接引用组件类的vmOptions属性 -->
    <a [href]="vmOptions.location" class="rt-active-link">Lorem ipsum dolor sit amet</a>
  </rt-card-footer>
</rt-card>

关键差异说明 #

• AngularJS里的$scope是控制器的作用域容器，数据挂载在$scope上供模板使用；而Angular 5+中，组件类本身就是数据的载体，模板会自动关联到组件实例，类中定义的所有公共属性都能直接在模板中访问。
• 如果你想简化属性结构，也可以直接在组件类中定义location属性（比如location = 'http://www.google.com'），然后模板中用[href]="location"。但保留vmOptions对象结构能更好地对齐原AngularJS的逻辑，降低重构成本。

内容的提问来源于stack exchange，提问作者rf2018