通过简单地更改指令名称并更改结构以适应这些指令来将 AngularJS 转换为 Angular？答案

【问题标题】：Converting AngularJS to Angular by simply changing the directive names and changing the structure to suit these directives?通过简单地更改指令名称并更改结构以适应这些指令来将 AngularJS 转换为 Angular？
【发布时间】：2019-10-03 15:37:06
【问题描述】：

我有这个带有 AngularJS 指令的 html 块。我想将其转换为 Angular8。在我的 Angular 项目中，我制作了一个名为 destination 的自定义组件。在名为 destination.component.ts 的目标 ts 文件中，我从 json 文件导入数据并将数据分配给目标组件 destinations = data;，以便可以在 destination.component.html 中使用数据。

destination.component.ts

import { Component, OnInit } from '@angular/core';
import * as data from './destinations.json';

@Component({
   selector: 'app-destination',
   templateUrl: './destination.component.html',
   styleUrls: ['./destination.component.css']
 })
export class DestinationComponent implements OnInit {

  destinations = data;

  constructor() { }

  ngOnInit() {
    console.log(data.bro_intel);
 }

}

destination.component.html

<div class="feature-panel" style="margin-top: 20px;">
 <div class="double-container">
<div class="left">
  <div class="feature-title"> Featured Destinations</div>
  <div class="feature-icon-content">
    <div class="destination-icon-container" ng-repeat="destination in destinations" title="{{destination.label}}" ng-click="select(destination)" ng-if="destination.product_type != 'custom'">
      <div class="destination-count" ng-show="all_dest_map[destination.product_type] > 0">{{all_dest_map[destination.product_type]}}</div>
      <img src="{{icon_url +  destination.icon}}">
    </div>
  </div>
</div>
<div class="right">
  <div class="feature-title">
    Other destinations&nbsp;
    <div style="margin: -20px 0 0 130px;" class="destination-count" ng-show="all_dest_map['custom']>0">{{all_dest_map['custom']}}</div>
  </div>
  <div class="feature-others-content">
    <div style="font-size: 12px;margin-bottom: 15px;padding: 5px;">
      We can send threat intelligence to any product that allows for file based integration.
      We do not currently support API integrations.
    </div>
    <div class="setup-label" ng-click="select(icon_map['custom'])">
      Set up Custom Destination
    </div>
  </div>
</div>
</div>
</div>

将我在 html 中的 AngularJS 指令转换为等效的 Angular8 指令有效吗？如果是，那它会是什么样子？如果没有，我将如何实现这一目标？

注意，我对 Angular 和 AngularJs 完全陌生。

【问题讨论】：

你必须知道语法，但是是的，它可以工作。取决于您的业务逻辑和所有，但它可以。此外，不要指望这里的任何人为您做这件事，而是在您遇到代码问题时询问我们。

标签： html angularjs angular angular8

【解决方案1】：

是的，将 angularjs 指令替换为等效的 angularjs 指令会起作用。 ng-repeat 应改为 *ngFor，ng-if 改为 *ngIf，ng-click 改为 (click)。您修改后的模板应如下所示-

 <div class="feature-panel" style="margin-top: 20px;">
     <div class="double-container">
    <div class="left">
      <div class="feature-title"> Featured Destinations</div>
      <div class="feature-icon-content">
<ng-container  *ngFor="let destination of destinations">
        <div class="destination-icon-container" title="{{destination.label}}" (click)="select(destination)" *ngIf="destination.product_type != 'custom'">
          <div class="destination-count" *ngIf="all_dest_map[destination.product_type] > 0">{{all_dest_map[destination.product_type]}}</div>
          <img src="{{icon_url +  destination.icon}}">
        </div>
</ng-container>
      </div>
    </div>
    <div class="right">
      <div class="feature-title">
        Other destinations&nbsp;
        <div style="margin: -20px 0 0 130px;" class="destination-count" *ngIf="all_dest_map['custom']>0">{{all_dest_map['custom']}}</div>
      </div>
      <div class="feature-others-content">
        <div style="font-size: 12px;margin-bottom: 15px;padding: 5px;">
          We can send threat intelligence to any product that allows for file based integration.
          We do not currently support API integrations.
        </div>
        <div class="setup-label" (click)="select(icon_map['custom'])">
          Set up Custom Destination
        </div>
      </div>
    </div>
    </div>
    </div>

【讨论】：