Как мне получить доступ к дочернему элементу в переменной TemplateRef?

У меня есть компонент, который включает модальное окно. Модальное окно заключено в тег <ng-template>.

<ng-template #modalm let-modal>
...
   <button type="button" (click)="onSubmit()" class="btn btn-primary">OK</button>
...
</ng-template>

Это позволяет мне открывать и закрывать модальное окно из моего файла component.ts.

constructor(private modalService: NgbModal,
    private activeModal: NgbActiveModal)
...
public openModal(modalm: TemplateRef<any>){
    this.activeModal = this.modalService.open(modalm);    
    const btn = modalm.elementRef.nativeElement.querySelector('.btn-primary');
  }

Я хотел бы получить доступ к элементу кнопки и установить для него свойство. Я следую принятому ответу в Как найти элемент внутри TemplateRef , звонит querySelector с modalm.elementRef.nativeElement. Это дает мне ошибку:

TypeError: modalm.elementRef.nativeElement.querySelector is not a function

Почему в этом случае я не могу позвонить querySelector?

Я понимаю, что мне нужно использовать тип TemplateRef из-за того, что модальное окно заключено в ng-template. Каков правильный синтаксис для доступа к элементу в модальном окне?


typescript angular bootstrap-5
person NeartCarp    schedule 23.07.2021    source источник
comment
Не следует полагаться на .querySelector. Почему бы вам вместо этого не попробовать передать нужную опцию через NgbModalRef#componentInstance?   -  person developer033    schedule 24.07.2021
comment
@ developer033 Я мог бы создать отдельный компонент для модального окна. Это необходимо, или я могу получить доступ к элементу html из файла component.ts этого компонента?   -  person NeartCarp    schedule 24.07.2021

Ответы (1)


arrow_upward
0
arrow_downward

Это видео от Max NgWizard указывало мне правильное направление. Для экземпляра TemplateRef я не мог найти способа, позволяющего ts-доступ к DOM, чтобы можно было установить свойство кнопки. Как указано в комментариях, установка свойств элемента в ts-файле также не рекомендуется. Лучше поместить в разметку html такую ​​директиву, как ngClass, и искать флаг в файле ts. Для этого можно создать класс в файле css компонента.

Сначала я создаю класс .myClass со свойствами стиля, которые мне нужны в файле css компонента. Затем я могу поместить на свою кнопку условную директиву, чтобы добавить этот класс, например

<button type="button" (click)="onSubmit()" class="btn btn-primary" [class.myClass]="loadComplete">OK</button>

Логическое значение loadComplete управляет применением класса css из файла ts.

Классу css требуется добавить оператор !important для переопределения определений стиля Bootstrap в моем случае.

.myClass {
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    color: red !important;
  }
person NeartCarp    schedule 26.07.2021