Angular7 ng-zorro-antd 製做右鍵菜單

• 沒多少邏輯，就直接貼代碼了
• 下面是html模板的代碼：

<ul nz-menu [style.width]="300"
    [nzTheme]="'dark'"
    [nzMode]="'inline'"
    [nzInlineCollapsed]="isCollapsed">

    <li nz-menu-item (contextmenu)="contextMenu($event, contextTemplate)">中國</li>
    <li nz-menu-item (contextmenu)="contextMenu($event, contextTemplate)">美國</li>
    <li nz-menu-item (contextmenu)="contextMenu($event, contextTemplate)">英國</li>
</ul>

<ng-template #contextTemplate>
  <ul nz-menu
      nzInDropDown
      nzSelectable
      (nzClick)="close()">
    <li nz-menu-item
        (click)="openRenameListModal()">
      <i class="anticon anticon-edit anticon-right-margin"></i>
      <span>重命名</span>
    </li>
    <li nz-menu-divider></li>
    <li nz-menu-item
        (click)="delete()">
      <i class="anticon anticon-delete anticon-right-margin danger"></i>
      <span class="danger">刪除列表</span>
    </li>
  </ul>
</ng-template>

• 下面是ts文件的代碼

import { Component, TemplateRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzDropdownContextComponent, NzDropdownService } from 'ng-zorro-antd';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(
    private dropdownService:NzDropdownService
  ){}

  dropdown:NzDropdownContextComponent;

  contextMenu($event:MouseEvent,template:TemplateRef<void>){
    this.dropdown=this.dropdownService.create($event,template);
  }

  openRenameListModal(){
    console.log("打開了重命名modal");
  }

  close(){
    this.dropdown.close();
  }

  delete(){
    console.log("刪除了一個元素");
  }
}