Material2调用Tooltip show方法

Question

我正在尝试调用 Material 2 Tooltip 上的显示和隐藏方法，以便我可以强制工具提示根据组件中的某些条件显示或隐藏它。

我试过使用 @ViewChild 来获取对指令的引用，但我一定是做错了什么。

模板片段：

<button md-mini-fab color="primary" mdTooltip="Menu" [mdMenuTriggerFor]="menu" class="remove-record">
  <md-icon color="white">view_headline</md-icon>
  </button>

组件片段：

export class RackAverageComponent implements OnInit {
    @ViewChild(MdTooltip) save;

    ngOnInit() {
       this.save.show();
   }
}

模板中的指令似乎没有与组件相关联。不确定我是否正确使用 @ViewChild。

Answer 1

如果您希望获得对@ViewChild 模板元素的引用，您应该添加一个本地模板变量，如下所示： HTML

   <button #myTooltip md-mini-fab color="primary" mdTooltip="Menu" [mdMenuTriggerFor]="menu" class="remove-record">
          <md-icon color="white">view_headline</md-icon>
    </button>

打字稿

export class RackAverageComponent implements OnInit {
    @ViewChild(myTooltip) save;
.....
}

Answer 2

您需要为工具提示提供一个 id。

将您的模板更改为：

<button md-mini-fab color="primary" 
              #tooltip="mdTooltip" [mdTooltip]="'Menu'" 
              [mdMenuTriggerFor]="menu" class="remove-record">
  <md-icon color="white">view_headline</md-icon>

... 并使用 ViewChild 访问工具提示并在视图初始化后显示：

@ViewChild('tooltip') tooltip:MdTooltip;

ngAfterViewInit() {
    this.tooltip.show ();
}

Material2调用Tooltip show方法

Material 2 Call Tooltip show Method

angular-material

angular-material2

angular