matTooltip无法与鼠标悬停闪烁的组件上的角度cli配合使用

Question

我正在使用Angular6和angular-cli-6.0.8。 当使用matTooltip时，然后在鼠标悬停时，我要更改组件（标题）的位置，而mouseOut则是正常的行为。 以下是代码：

<div #HeaderMenu>
    <div id="headerMenu" *ngIf="isHeaderButtonOpenStatus" style="display:block">
        <div class="right-h" *ngFor="let head of commonService.AllHeaderRoutingList">
            <a  [routerLink]="head.routerLink">
                <img class="addOnBtn" [id]="head.id" [src]="getSource(head)" [matTooltip]="head.title" (click)="setActive(head.id, head.source, head); toggleHeader()" />
            </a>
            <div [ngStyle]="{'background-color': head.isRouter ? '#0074BA' : '#232323' }" matTooltip="Pin to the top" (click)="setHeaderRouting(head)" class="isRouter"> </div>
        </div>
    </div>
</div>

因此，如果您在上面的代码中将鼠标悬停在元素<a ...</a>and <div [ngStyle]....</div>上

总共<div #HeaderMenu> ....</div>从上向下移动一点。换句话说，在页眉顶部创建空白（请参见下图）。 on Mouse hover on Image button header Component position change

请帮忙。

Answer 1

使用mdToolTip= "{{ your ngFor expression}}"。