在单个模板中多次使用Angular组件,并在其内部追加列表,可以通过以下步骤实现:
ng generate component component-name
来生成一个新的组件。app-custom-component
,则可以在模板中使用<app-custom-component></app-custom-component>
来插入组件。items
的输入属性,并在模板中使用*ngFor
指令来循环遍历并显示列表数据。以下是一个示例:
在组件类中定义输入属性:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-custom-component',
templateUrl: './custom-component.component.html',
styleUrls: ['./custom-component.component.css']
})
export class CustomComponentComponent {
@Input() items: string[];
}
在组件的模板中使用输入属性和*ngFor
指令来显示列表数据:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
在父组件的模板中多次使用组件,并传递不同的列表数据:
<app-custom-component [items]="list1"></app-custom-component>
<app-custom-component [items]="list2"></app-custom-component>
在上述示例中,list1
和list2
是父组件中定义的两个不同的列表数据。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云