将 AngularJS 迁移到 Angular 5

Question

我们目前正在将 ui-library 从 AngularJS 迁移到 Angular 5。

我已经看了我们的一个组件，但不确定如何处理$scope以及如何将其迁移到card.component.ts中。

根据我的研究，我知道"this"取代了$scope但不完全确定如何将其实现到card.component.ts文件中。

$scope.vmOptions = {
location: 'http://www.google.com'
};

'

当前的 AngularJS 代码：

card-demo.controller.ts

import { Module } from '../../../module';
import "./card-demo.template.html";
Module.register.config(['ComponentRegistry', (ComponentRegistry) => {
ComponentRegistry.push({
name: "card",
title: "Card",
description: "Card"
});
}]);
Module.register.controller('testCardDemo', ['$scope', ($scope) => {
$scope.vmOptions = {
location: 'http://www.google.com'
};
}]);

卡片演示模板.html

<div ng-controller="testCardDemo">
<test-card data-test-id="default-card">
<test-card-title>
Lorem ipsum dolor sit amet
</test-card-title>
<test-card-content>
<span>Lorem ipsum dolor sit amet</span>
</test-card-content>
<test-card-link>
<a href="{{vmOptions.location}}" class="test-active-link"></a>
</test-card-link>
</test-card>
</div>

---

角度 5 代码：

card.component.ts

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 {
constructor() { }
ngOnInit() {
}
}

卡组件.html

<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><a href="{{location}}" class="rt-active-link">Lorem ipsum dolor sit amet</a></rt-card-footer>
</rt-card>

Answer 1

在类中声明具有正确类型的变量，以便在编译时发现错误，声明后可以使用this关键字在类中使用该变量。

card.component.ts

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 {
location: string;
constructor() { }
ngOnInit() {
this.location = 'http://www.google.com'
}
}

卡组件.html

<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><a href="{{location}}" class="rt-active-link">Lorem ipsum dolor sit amet</a></rt-card-footer>
</rt-card>

Answer 2

您可以在类中声明一个"location"变量，并在ngOnInit((函数中设置"this.location = 'path'。

您将能够访问 html 中的位置变量，例如：{{location}}