Angular element inside bootstrap popover

Question

I am using Bootstrap with angular 2, My angular (click) is not working inside my popover content.

HTML:

 <p id="myPopover-profile">Operator</p>

    <div class="profile-option" id="profile-option">
      <div class="user-name"> Jhone Doe</div>
      <div class="line"> </div>
      <div class="end-session" (click)="endSession()"> End Session </div>
      <div class="logout"> Logout </div>
    </div>

</div>

TS:

  ngOnInit() {
    $('#myPopover-profile').popover({
      placement: 'bottom',
      toggle: 'popover',
      html: true,
      content:  function() {
        return $('#profile-option').html();
      }
    });

  }

  endSession(){
    console.log("test");
  }

Answer 1

为什么不为弹出框创建一个组件，并在popover html中执行类似<my-component></my-component>因此可以使用myComponent.ts文件来获得所需的逻辑。