Повторно используемый шаблон / фрагмент html для нескольких компонентов

Question

Я пытаюсь выяснить, можно ли в angular повторно использовать фрагмент html для нескольких angular компонентов и местоположений.

То, что я пытаюсь решить, в моем раскрывающемся списке списки (чья информация поступает из-за пределов моей системы), я могу sh добавить пустое значение и заполнитель к ним, если они не выбраны, следующим образом:

<select class="custom-select" [(ngModel)]="modelValue">
    <option value="">PlaceholderText</option>
    <option value="null" hidden disabled>PlaceholderText</option>
    <option value ="undefined" disabled hidden >PlaceholderText</option>
    <option *ngFor="let option of option()" [value]="option.code">
        {{optionn.desc}}
    </option>

Приведенный выше код работает и достигает ожидаемого В результате я ищу способ сделать эти три первых варианта многократно используемыми во всем моем приложении во всех раскрывающихся списках, где мне это нужно.

Пробовал с компонентом super basi c с этими первыми 3 варианта в шаблоне, но, поскольку он отображает тег обертки компонента, он не работает.

С шаблонами я верю, что мне придется определять его в каждом компоненте базы tempalte, где он мне нужен.

Можно ли каким-то образом определить ngTemplate, ngContainer или что-то еще с этим фрагментом html (первые 3 варианта) и повторно использовать его в моем приложении?

Спасибо

Answer 1

Сделайте это select a component, для этого components.

Может потребоваться список параметров для заполнения внутри выбора после первых 3-х по умолчанию, плюс значение modelValue используется (также используйте modelValueChange, чтобы он мог быть как входным, так и выходным), также вы можете использовать текст плашдера по умолчанию, но при желании использовать другой, в зависимости от вашего компонента.

что-то вроде

@Component({
    selector: 'my-select',
    template: `
        <select class="custom-select" [(ngModel)]="modelValue">
            <option value="">{{PlaceholderText}}</option>
            <option value="null" hidden disabled>{{PlaceholderText}}</option>
            <option value ="undefined" disabled hidden >{{PlaceholderText}}</option>
            <option *ngFor="let option of options" [value]="option.code">
                {{optionn.desc}}
            </option>
        </select>
    `
})
export class MySelectComponent implements  OnInit{
    @Input() options: MyOptionsModel[] = [];
    @Input() placeholderText: string = 'Placeholder Text';
    @Input() modelValue: any;
    @Output() modelValueChange = new EventEmitter<any>();

    constructor() {}

    ngOnInit(){
     // whatever
    }
}

тогда в любом компоненте

<my-select [options]="myOptions" [(modelValue)]="myModelValue"></my-select>