Question

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

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

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

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

`

当前的AngularJS代码：

卡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'
  };
}]);

卡demo.template.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>

<小时/> Angular 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() {
  }
}

card.component.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

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

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

Answer 2

您在类中使用正确的类型声明变量，以便在编译时可以找到错误，声明后您可以使用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'
  }
}

<强> card.component.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>

将AngularJS迁移到Angular 5

2 个答案: