표의 첫 번째 열을 가리키면 도구 설명이 나타납니다. 모든 머티리얼 툴팁에서 json 데이터 오른쪽 하단에 버튼을 삽입하고 싶습니다.이 버튼을 클릭하면 각도 머티리얼 대화 상자가 열립니다.
<ng-container matColumnDef="Alert">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alert </th>
<td mat-cell *matCellDef="let row">
<span [matTooltipClass]="{ 'tool-tip': true }"
matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">
{{row.Alert}}
</span>
</td>
</ng-container>
툴팁이 작동하는 stackblitz 링크
https://stackblitz.com/edit/angular-mat-tooltip-sktlqk?file=app%2Ftooltip-overview-example.ts
# EDIT1 앵귤러 머티리얼 툴팁이 내 목적에 맞지 않기 때문에 사용자 정의 툴팁을 만들었습니다.
https://stackblitz.com/edit/angular-mat-tooltip-u5ir3o?file=app%2Ftooltip-overview-example.ts
툴팁이 작동합니다
주석을 기반으로 툴팁에 데이터와 버튼을 삽입했지만 두 가지해야 할 일이 있습니다.
1) 사용자가 버튼을 클릭 할 수 있도록 툴팁이 열린 후 툴팁 위에 계속 마우스를 올려 놓을 때까지 툴팁을 열어 두는 방법 (이제 사용자가 첫 번째 열을 떠나면 툴팁이 닫힙니다)
과
2) 툴팁이 마우스 오버 된 위치에서 상단에 툴팁이 열리면 툴팁 깜박임이 발생합니다 (첫 번째 열이 마우스 오버 될 때 마우스 오버 된 행의 맨 아래에 툴팁을 배치하고 싶고, hovred 행이 맨 아래에 있으면 마우스 오버 한 바로 위에 툴팁이 열립니다. 행)
사용자 지정 MatTooltip및을 만들고 있기 때문에이를 TooltipComponent염두에두고 문제를 해결하고 싶었습니다.
나는 적어도 최소한의를 확장 할 TooltipCompenent에 CustomToolTipComponent이 당신의 지시에 로직을 기존의 활용에 당신을 허용한다.
export class CustomToolTipComponent extends TooltipComponent
나는 당신의 지시를 많이 변경했고 그 변화가 무엇을하고 있는지를 설명하기 위해 최선을 다했습니다. 본질적으로 확장 된 .NET의 확장 된 논리를 활용하면서 자신의 지시문을 따르는 것입니다 TooltipComponent.
내가 이것을 처음부터 작성한다면 가능한 한 많은 기본 로직을 사용하면서 이것을 달성하는 방법이있을 수 있으므로
MatTooltip클래스를 확장하고 엉망으로 만들지CustomToolTipComponent않을 것입니다.
그러나 이렇게하면 모든 미해결 작업 항목이 해결되고 계속 진행할 수 있습니다.
스택 블릿츠
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다