Можете ли вы поместить интерполяцию строк в нг-контент?

Question

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

Спасибо!

В приведенном ниже коде я запутался в этой части:

{{this.userVM.currentUser.firstName}} {{this.userVM.currentUser.lastName}}

И я предполагаю, что он не работает, потому что он содержится в элементах ng-content. Я думаю, что внутри находится нг-контент, который должен быть статичным... но это кажется крайне ограниченным, поэтому мне нужно было спросить.

Так или иначе, моей целью было сделать эту работу:
новый пользователь security.component.html:

<modal-base [display]="this.userRequestConfirmModal" [yesFunction]='this.confirmFinalizeUser()'>Finalize
  {{this.userVM.currentUser.firstName}} {{this.userVM.currentUser.lastName}}'s
  account?
  <br>
  <br> The user will be contacted with their login
  <br> information at this time.</modal-base>

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

<div *ngIf='userRequestConfirmModal' class='validation-modal-overlay'>
  <div class='validation-modal-window small-modal'>
    <div class="validation-modal-toolbar">
      <div class="validation-modal-close" (click)="newlevel2(null); newlevel3(null)">
        <span class="icon-x"></span>
      </div>
    </div>
    <div class='validation-modal-content'>
      Finalize {{this.userVM.currentUser.firstName}} {{this.userVM.currentUser.lastName}}'s
      account?
      <br>
      <br> The user will be contacted with their login
      <br> information at this time.
    </div>
    <div class="buttons-spaced">
      <button autofocus (click)="this.userRequestConfirmModal=!this.userRequestConfirmModal"
        class="continue-cancel-options">No, stay</button>
      <button autofocus (click)="confirmFinalizeUser()" class="continue-cancel-options">Yes</button>
    </div>
  </div>
</div>

Вот и все остальное. Довольно просто

Это модальный-base.component.ts

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

@Component({
  selector: 'modal-base',
  templateUrl: './modal-base.component.html',
  styleUrls: ['./modal-base.component.css']
})
export class ModalBaseComponent implements OnInit {

  @Input() display: boolean = false;
  @Input() twoButtons: boolean = false;
  @Input() closeFunction: void;
  @Input() yesFunction: void;
  @Input() leftButtonText: string = 'No, stay';
  @Input() rightButtonText: string = 'Yes';

  constructor() { }

  ngOnInit() {
  }

  // defaultErrorYesFunction() {
  //   alert('when using the two button modal you must specify the "yesFunction()" please see the modal-base component to troubleshoot');
  //   console.error('when using the two button modal you must specify the "yesFunction()" please see the modal-base component to troubleshoot');
  // }
}

модальный-base.component.ts

<div *ngIf='display' class='validation-modal-overlay'>
  <div class='validation-modal-window small-modal'>
    <div class="validation-modal-toolbar">
      <div class="validation-modal-close" (click)="display=!display; closeFunction">
        <span class="icon-x"></span>
      </div>
    </div>
    <div class='validation-modal-content'>
      <ng-content></ng-content>
    </div>
    <ng-template class="buttons-spaced" *ngIf="twoButtons; else oneButton">
      <button autofocus (click)="this.display=!this.display" class="continue-cancel-options">{{leftButtonText}}
      </button>
      <button autofocus (click)="yesFunction" class="continue-cancel-options">{{rightButtonText}}</button>
    </ng-template>
    <ng-template #oneButton class="buttons-centered">
      <button autofocus (click)="display=!display; closeFunction" class="ok-button">OK</button>
    </ng-template>
  </div>
</div>