Question

我的问题是关于我在我的代码中执行此操作的方式是否正确，或者是更好的解决方案。

这是我的代码：

<div *ngFor="let dataHolder of data; let i = index" ">


        <ul>
            <li class='list-item' [id]=datas.id [ngStyle]="{ 'transform': 'rotate('+numberArray[i]+'deg) translate(0,-'+Height+'px) rotate(-'+numberArray[i]+'deg)' }"
             (click)="alertMethod(data, i)">

                <div class='list-link' [ngStyle]="{ 'transform': 'rotate('+numberArray[i]+'deg) translate(0,+'+Height+'px) rotate('+0+'deg)' }">
                    <img alt='notfound' [src]=imageDirection[i]>
                </div>
                <div class='test'>
                    <img alt='notfound' class='img' src='any Icon'>
                </div>
                <div class='test'>
                    {{ dataHolder.name }}
                </div>


            </li>
        </ul>

    </div>

它拥有的每个数据来自1个组件。

首先我得到了包含字符串的数据，这些数据循环显示并在屏幕上显示出来。然后它围绕屏幕旋转，所以它获得了一个新的位置。代码运行良好，我提到的每一步都在用户看到应用程序之前完成。但现在作为Angular的新手，我想问你们，如果在我的代码示例中有更好/更清晰的方式来更改DOM中的代码（新样式，添加新元素，创建新段落等）。如果您需要更多示例，我可以提供更多。

我真的很感谢你的帮助，因为目前我不确定我的DOM模型是不是很干净而且我的方式是错误的。

Answer 1

你所看到的对我来说看起来很合理，但我更愿意将这些转换提取为常量或函数，我可以引用，重用，并避免使用已经复杂的Angular DOM语法，该语法基于已经复杂的现有DOM句法。

alt经常重复，可以作为指令考虑因素。

我可能会这样做

<强> list.component.html

<div *ngFor="let dataHolder of data; let i = index">
    <ul>
        <li class='list-item'
          [id]=datas.id
          [ngStyle.transform]="createTransform(numberArray[i], height, numberArray[i])"
          (click)="alertMethod(data, i)">

            <div class='list-link'
              [ngStyle.transform]="createTransform(numberArray[i], height, 0)">
              <img alt='notfound' [src]=imageDirection[i]>
            </div>
            <div class='test'>
              <img alt='notfound' class='img' src='any Icon'>
            </div>
            <div class='test'>
                {{ dataHolder.name }}
            </div>

        </li>
    </ul>
</div>

<强> list.component.ts

import {Component,  ChangeDetectionStrategy} from '@angular/core';

import template from './list.component.html';

@Component({
  selector: 'list',
  template,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export default class {
  numberArray: number[] = [];

  createTransform = createTransform;
}

// testability for the win!
export function createTransform(primaryAngle: number, height: number, secondaryAngle = 0) {
  return `rotate(${primaryAngle}deg) translate(0, -${height}px) rotate(-${secondaryAngle}deg)`;
}

但是，请务必查看Angular官方动画库。

Angular有一种更清晰的方式来改变DOM吗？

1 个答案: