如你所知,在第17角,我们可以用不同的语法来表示ngIfngFor等等.我正在寻找一种将html文件中的旧语法迁移到新语法的102方法,Angular 为17:

例如,我有一个15度角的旧html:

<ng-container *ngIf="!dynamicWidth; else FlexibleRef">
  <div class="c-title"></div>
  <div class="c-desc c-desc__short"></div>
  <div class="c-desc c-desc__long"></div>
</ng-container>

<ng-template #FlexibleRef>
  <div
    *ngFor="let item of count | numberRange; let i = index"
    [ngStyle]="{ width: (100 / count) * (i + 1) + '%' }"
    class="flexible-desc"></div>
</ng-template>

并且在新的语法中需要它,如下所示:

@if (!dynamicWidth) {
  <div class="c-title"></div>
  <div class="c-desc c-desc__short"></div>
  <div class="c-desc c-desc__long"></div>
} @else { 
    @for (item of count | numberRange; track item; let i = $index) {
      <div [ngStyle]="{ width: (100 / count) * (i + 1) + '%' }" class="flexible-desc">. </div>
   } 
}

推荐答案

如果你使用Angular CLI,你可以运行ng g @angular/core:control-flow

如果使用NX,您可以运行nx generate @angular/core:control-flow-migration

当您运行这两个命令之一时,CLI会询问您应该迁移项目中的哪个路径.默认情况下,它将应用于./,这将迁移整个项目.您可以为其提供指向特定目录、组件等的路径.

在工作中,我在NX monorepo的某个目录中拥有一组功能.为了迁移我的部分,我使用了./libs/project-name/my-directory-name,它与我在那里拥有的所有功能/UI库运行.如果需要,您还可以指定一直到模板的路径,并逐个文件执行migrations.它甚至适用于组件decorator 中定义的模板文字.

Html相关问答推荐

HTML图像无法正确放大和缩小规模

试图让三个Divs与下面的另外三个对齐

将网格包装在css中

如何在htmlAngular 17的@for中使用索引

如何最大限度地减少Cookie同意代码对性能的影响?

对称渐变作为背景

小虫?CSS Flexbox间隙应用于两个内联文本块之间,因为它们之间存在绝对定位的元素

在<;style&>中列出的三种字体中,只有两种显示

如何保持嵌套进度条的背景色?

如何将内容元素放在侧边栏旁边?

Style=背景图像URL引用变成&;Quot;

将导航项目底部边框与导航栏对齐

如何将多个类名组合到CSS中的一个关键帧

当div位于flexbox中时,如何使div的宽度与高度相同

如何为高度较小的块制作边框动画?

为什么当我按第三个按钮时,前两个按钮会跳动?

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

如何调整边框半径以匹配父边框半径

悬停一个 div 时更改所有其他 div 上的字体 colored颜色

如何使列表的第一个元素比 css 中的其他元素大?