提取Angular HTML代码的最佳实践？

如何解决提取Angular HTML代码的最佳实践？

在Angular项目中，我有一个基本组件

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

  constructor(public dialog: MatDialog) { }

  ngOnInit() {}
}

在HTML文件中，我使用此组件约16次。我已经将它完全硬编码为16个不同的“卡片盒”，例如：

HTML

                    <mat-card id="CARDBox">
                        <img class="logoy" src="assets/image" height=35px>
                        <a href="link1.com" class="button">Box1</a>
                        <input type="image" id="info" title="Click for description" src="assets/image2" height=20px/>
                    </mat-card> 
                    
                    <mat-card id="CARDBox">
                        <img class="logoy" src="assets/image3" height=35px/>
                        <a href="link2.com" class="button">Box2</a>
                        <input type="image" id="info" title="Click for description" src="assets/image2.png" height=20px/>
                    </mat-card>

本质上，这将渲染一个带有几个图像的小盒子，以及一个将用户带到外部链接的按钮。在HTML文件中键入了16个这样的框，每次我想添加一个新框时，我都必须重写基本相同的代码，只是输入有所不同。

如您所见，这种格式已被大量重用，但很难将其硬编码到HTML文件中。有没有一种方法可以对重用的代码进行抽象处理，以免繁琐地对其进行硬编码？我如何为此制作一个可以多次使用的模板？更进一步，我如何添加，删除和更改此项目列表？

解决方法

在component.ts文件中，可以添加一个名为cards的属性。

@Component({
  selector: 'app-cardboxes',templateUrl: './cardboxes.component.html',styleUrls: ['./cardboxes.component.scss']
})
export class CardboxesComponent implements OnInit {
  cards = [
       {
          'imageUrl': '/assets/image.png','link': 'link1.com',... More Stuff YOu like
       },{
          'imageUrl': '/assets/image1.png',.. More items ...
  ];
  constructor(public dialog: MatDialog) { }

  ngOnInit() {}
}

然后在您的html中，您可以遍历该cards数组：

<mat-card id="CARDBOX" *ngFor="let card of cards">
    <img class="logoy" src="{{ card.imageUrl }}" height=35px/>
    <a href="{{ card.link }}" class="button">Box2</a>
    <input type="image" id="info" title="Click for description" src="assets/image2.png" height=20px/>
</mat-card>

注意：我也避免将CARDBOX id添加到每个元素，因为在HTML5中这是不好的做法。

那您的问题应该解决了……让我知道是否对您有帮助。

没有测试它，但是在这种情况下ngFor可以发挥作用。制作一个新的接口卡的数组

export interface CardDetail {
   id: number;
   image: string;
   link: string;
   button: string;
   input: string;
}

<mat-card *ngFor="let item of cardDetailArray">
    <img class="logoy" src="{{item.image}}" height=35px>
    <a href="{{item.link}}" class="button">{{item.button}}</a>
    <input type="image" id="info" title="Click for description" src="{{image.input}}" height=20px/>
</mat-card>

如果只是字面上的数字差异。只需创建一个数字数组[1,2,3，... x]并使用numberArray中的ngfor let项，即可将所有内容与number变量连接起来。