миграция AngularJS в Angular 5 - PullRequest
Новая
       17

миграция AngularJS в Angular 5

0 голосов
/ 23 мая 2018

В настоящее время мы переносим нашу пользовательскую библиотеку с 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'
  };
}]);

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

Угловой 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>

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Вы объявляете переменную внутри класса с правильным типом, чтобы можно было найти ошибку во время компиляции, после объявления вы можете использовать эту переменную внутри класса, используя ключевое слово 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>
0 голосов
/ 24 мая 2018

Вы можете объявить переменную 'location' внутри класса и установить 'this.location =' path 'внутри функции ngOnInit ().

Вы сможете получить доступ к переменной location внутри HTML, как: {{location}}

...