angular - Angular 8のBootstrapモーダルダイアログでコンポーネントが表示された後に機能を実行する方法は?

Question

私の Angular プロジェクトにはselect-box、データ モデルからデータを取得するコンポーネントがあります。オプションは基本的にサービスに由来し、選択された値は現在開いているデータ モデルに由来します。

select タグの近くに追加ボタンを実装したいと考えています。ユーザーがこのボタンをクリックすると、選択に表示されているモデルのフォームを含むモーダル ウィンドウが表示されます。ユーザーがモデルの新しいインスタンスをここに追加すると、データがストレージに保存され、select がこの新しいインスタンスで更新されます。

多くの選択フィールドを持つ複雑なフォームを使用します。多くのプラス ボタンが付属しており、多くの作成コンポーネントが開きます。

ユーザーが特定のプラスボタンをクリックするまで、これらのコンポーネントをレンダリングすることを避けたいです。

親コンポーネントの TypeScript コードは次のとおりです。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // this coming from a data service
  langs = [
    {id: 1, name: 'english'},
    {id: 2, name: 'deutsch'},
    {id: 3, name: 'latin'},
  ];

  // coming from a data service
  model = {
    id: 100,
    name: 'John Doe',
    lang_id: 3,
  }
}

以下は、select コンポーネントを現在どのように使用しているかの例です。

<app-select-box [items]="langs" [selectedValue]="model.lang_id">
  <app-lang-create-edit></app-lang-create-edit>
</app-select-box>

私の選択ボックス コンポーネントの HTML コードは次のとおりです。

<div class="input-group">
  <select class="form-control">
      <ng-container *ngFor="let item of items">
        <option [value]="item[value]">{{ item.names[0][text] }}</option>
      </ng-container>
  </select>
  <div class="input-group-append" *ngIf="!buttonHide">
    <button class="btn btn-light" tabindex="-1" (click)="showModal(modal)"> + </button>
  </div>
</div>

<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" *ngIf="isModalOpen">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title">Add new element</h5>
      <button type="button" class="close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
          <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

問題はタグの使用にあると思います。これはng-content、レンダリングと同時に着信コードをレンダリングするため<div class="modal" ...>です。

これは、より詳細なコードを含む実際の例です。

app-lang-create-editモーダルが表示されなくなるまでコンポーネントをレンダリングすることを何とか回避できますか?

ユーザーがモーダルダイアログを閉じて再度開くと、毎回再レンダリングしたい。

解決策はありますか？