html 组件 重叠,在同一组件中重复HTML

在模板中创建包含HTML的子组件,并在(父)组件中根据需要多次使用它,如下所示:

子组件:

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

@Component({

selector: 'app-child-comp',

template: `

• *ngFor="let p of pages; let i = index;"

  [ngClass]="{'active': page.current_page == i+1}"

  (click)="onPageChange(i+1, $event)"

  >{{i+1}}

`,

styleUrls: ['./child-comp.component.css']

})

export class ChildCompComponent implements OnInit {

@Input() pages;

constructor() { }

ngOnInit() {

}

onPageChange(index, event) {

}

}

父组件:

...