材料2调用工具提示显示方法

Question

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

我尝试使用@ViewChild来获取对该指令的引用，但我必须做错了。

模板摘录：

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

Component Snippet：

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

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

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

Answer 1

您需要为工具提示提供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 ();
}

Answer 2

如果您希望获得对@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;
.....
}