В Angular существует несколько способов использования одного компонента несколько раз с разными значениями. Рассмотрим несколько примеров:
1. Использование входных свойств (Input Properties):
В Angular компоненты могут принимать значения через входные свойства. Чтобы использовать один компонент несколько раз с разными значениями, вы можете передавать эти значения через входные свойства. В компоненте входные свойства объявляются с помощью декоратора @Input. Например:
// my-component.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-component',
template: 'Значение: {{value}}'
})
export class MyComponent {
@Input() value: string;
}
// app.component.html
<my-component [value]="'Значение 1'"></my-component>
<my-component [value]="'Значение 2'"></my-component>
<my-component [value]="'Значение 3'"></my-component>
В этом примере компонент MyComponent используется трижды на странице, и каждый раз ему передается разное значение через входное свойство value.
2. Использование ngFor:
Другой способ использовать один компонент несколько раз с разными значениями - использовать структурную директиву ngFor. С этой директивой вы можете создать повторяющийся блок кода, каждому экземпляру которого можно передавать разные данные. Например:
// my-item.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-item',
template: 'Значение: {{value}}'
})
export class MyItemComponent {
@Input() value: string;
}
// app.component.html
<ng-container *ngFor="let item of items">
<my-item [value]="item"></my-item>
</ng-container>
В этом примере используется компонент MyItemComponent, который отображает значение из входного свойства value. На странице используется ng-container с директивой ngFor, которая повторяет блок кода для каждого элемента массива items, передавая каждому экземпляру компонента разное значение.
3. Использование сервиса:
Еще один способ использования одного компонента несколько раз с разными значениями - использование сервиса. Сервис может хранить и предоставлять значения, которые нужны компоненту. Каждый компонент может обратиться к сервису и получить нужное значение. Например:
// my-service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
values = ['Значение 1', 'Значение 2', 'Значение 3'];
}
// my-component.component.ts
import { Component } from '@angular/core';
import { MyService } from 'my-service';
@Component({
selector: 'my-component',
template: 'Значение: {{value}}'
})
export class MyComponent {
value: string;
constructor(private myService: MyService) {
this.value = this.myService.values[0];
}
}
// app.component.html
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
В этом примере используется сервис MyService, который хранит массив значений. Компонент MyComponent внедряет этот сервис и получает значение из него в конструкторе. На странице компонент MyComponent используется трижды, и каждый раз ему предоставляется разное значение через сервис.