如何将tooltip类应用于angular中的所有孩子？
在Angular中，可以通过使用Angular Material库来实现tooltip类应用于所有孩子的效果。Angular Material是一个UI组件库，提供了丰富的可重用组件，包括tooltip。
要将tooltip应用于Angular中的所有孩子，可以按照以下步骤进行操作：
- 首先，确保已经安装了Angular Material库。可以通过运行以下命令来安装：
- 首先，确保已经安装了Angular Material库。可以通过运行以下命令来安装：
- 在需要使用tooltip的组件中，导入MatTooltipModule模块：
- 在需要使用tooltip的组件中，导入MatTooltipModule模块：
- 在组件的@NgModule装饰器中，将MatTooltipModule添加到imports数组中：
- 在组件的@NgModule装饰器中，将MatTooltipModule添加到imports数组中：
- 在HTML模板中，使用matTooltip指令来添加tooltip：
- 在HTML模板中，使用matTooltip指令来添加tooltip：
- 可以将matTooltip指令应用于任何HTML元素，例如按钮、图标等。
以上步骤将使得tooltip应用于单个元素。如果要将tooltip应用于所有孩子，可以使用Angular的ViewChild装饰器和ElementRef来实现。
- 在组件类中，导入ViewChild和ElementRef：
- 在组件类中，导入ViewChild和ElementRef：
- 在组件类中，使用ViewChild装饰器获取父元素的引用：
- 在组件类中，使用ViewChild装饰器获取父元素的引用：
- 这里假设父元素有一个名为"parent"的模板引用变量。
- 在ngAfterViewInit生命周期钩子函数中，使用nativeElement属性获取父元素的DOM对象，并为其所有孩子添加tooltip：
- 在ngAfterViewInit生命周期钩子函数中，使用nativeElement属性获取父元素的DOM对象，并为其所有孩子添加tooltip：
- 这里使用setAttribute方法为每个孩子元素添加matTooltip属性。
通过以上步骤，tooltip将应用于Angular中父元素的所有孩子。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版（TencentDB for MySQL）等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。
腾讯云官网链接地址：https://cloud.tencent.com/
相关·内容
1回答
MatToolTip在Angular中不能正常工作
angular、angular-material
我在一个延迟加载的模块中使用MatToolTip，并且没有收到任何错误，但是所有的工具提示文本(提供给matTooltip属性)都显示在屏幕的左下角，而不是显示工具提示的元素上。 当我使用Angular 9时，它工作得很好，但现在我移动了Annular 11，文本没有在适当的位置 下面是我使用matToolTip的html代码 <div
mat-raised-button
matTooltip="No changes made"
[matTooltipDisabled]="active"
[class.s
浏览 26提问于2020-12-16得票数 0
回答已采纳
1回答
matTooltip在iOS上不能正常工作(Safari)
ios、angular、angular-material、tooltip、angular-material2
我使用的是来自Tooltip的Angular Material，工具提示在iOS (Safari)上没有正确显示。这是我经历的行为：
iPhone与iOS 12:长点击按钮显示工具提示，但也执行click事件
iPad与iOS 13:在长抽头上完全没有工具提示
iPhone with iOS 14:工具提示显示在长点击上，但弹出菜单(剪切、复制、粘贴、.)显示并选择下面的文本。
在Android系统上，一切都如期而至。在我看来，matTooltip实际上根本没有在iOS上工作。这是我的设计：
角CLI: 8.3.29
角度: 8.2.14
@角/cdk 8.2.3
@角/材
浏览 7提问于2021-03-25得票数 1
7回答
工具提示问题，MatTooltip不能在角中工作
angular、angular-material、tooltip、angular-pipe
我正在尝试在仪表板页面中插入一个通知工具提示，但是工具提示不起作用。我是非常新的角度，所以任何线索有关这将受到高度赞赏。
module.ts
..
import {MatTooltipModule} from '@angular/material';
..
@NgModule({
..
MatTooltipModule
..})
component.html
<div class="notifications">
<i class="fa fa-bell fa-2x" aria-hiden=&#
浏览 2提问于2017-11-07得票数 35
回答已采纳
1回答
单击图标上的Angular2自定义工具提示
html、angular、tooltip
当我点击一个图标时，我想显示一个工具提示，而不是悬停在它上。
<a title="Tooltip">
<i class="fa fa-info-circle"></i>
</a>
我还希望能够使用以下类自定义工具提示：
<div class="a-tooltip a-tooltip--top-right">
This is my tooltip text!
</div>
我的尝试：
<a (click)="tooltip.toggle()"
浏览 0提问于2019-03-07得票数 0
1回答
angular工具提示不适用于图标
angular、tooltip、angular-material
我正在使用来自angular材质的工具提示。我想在悬停在图标上时显示工具提示。当我尝试在<i>标签上实现角度材质工具提示时，它似乎不起作用。
module.ts
import {MatTooltipModule} from '@angular/material/tooltip';
@NgModule({
imports: [
MatTooltipModule
]
component.html
<h4>Info <i class="fas fa-info-circle fa-xs" matToolti
浏览 0提问于2018-06-09得票数 0
2回答
MatTooltip在整个项目中不会与其对象/按钮对齐，如何对齐？
angular-material、tooltip
我正在使用Metronic构建一个项目(从themeforest下载)。我正在使用它的角度版本，并且我有这个样式问题，其中工具提示有一个向左偏移。 尝试重新安装angular、tooltip、hammerjs，但没有任何更改 在pages.module.ts中： import { MatTooltipModule, MatInputModule, ... } from "@angular/material";
@NgModule({
declarations: [ ... ],
imports: [
...
MatTooltipModule,
],
prov
浏览 15提问于2019-02-19得票数 2
1回答
NullInjectorError:没有MatSelectionList的提供者
javascript、angular、components
整个错误是: NullInjectorError: R3InjectorError(AppModule)MatSelectionList -> MatSelectionList -> MatSelectionList: NullInjectorError: No provider for MatSelectionList！
我真的不明白发生了什么，我在另一个组件中有这个元素，它没有问题地工作，我肯定要导入它，这是我的模块：
import { NgModule } from '@angular/core';
import { CommonModule } from &
浏览 4提问于2020-10-05得票数 1
回答已采纳
1回答
当我试图为我的角度应用程序服务时，我会得到以下错误
zone.js:642未处理的承诺拒绝:没有ErrorHandler。是否包括平台模块(BrowserModule)？；区域：；任务: Promise.then；值:错误:无ErrorHandler。是否包括平台模块(BrowserModule)？
但在我的app.module里
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsMod
浏览 0提问于2018-04-18得票数 1
回答已采纳
3回答
如何在角中通过自定义指令添加mattooltip
javascript、angular、angular-material、angular-material2
我正在创建一个名为TooltipDirective whihc的定制指令，它将向每个主机元素添加matTooltip，代码如下所示
import { Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core';
@Directive({
selector: '[tooltip]'
})
export class TooltipDirective implements OnInit
{
@Input() tooltip: string;
constructor
浏览 0提问于2018-07-10得票数 12
回答已采纳
1回答
角材料工具提示不按预期显示。
angular、angular-material、tooltip
我一直在寻找各种教程网站，试图获得材料工具提示的工作。超级令人沮丧，因为它看起来很容易。控制台不显示错误或警告。我使用的是角11，我的理解是，一旦我将MatTooltipModule导入到我的app.module.ts中，这个功能就可以用于同一个模块中的所有组件。
npm list @angular/core
finfo@0.0.0 C:\source\finfo
+-- @angular/core@11.2.9
`-- codelyzer@6.0.1
`-- @angular/core@9.0.0
npm list @angular/material
C:\source\finfo
`-
浏览 3提问于2021-04-11得票数 0
回答已采纳
2回答
Angular 2:从组件访问元素，getDocumentById不工作
angular、dom、angular2-template、angular2-components
我有一个Angular 2组件，我想通过元素的id来检索元素div <div id ="myId">。我尝试在我的组件(TypeScript)中执行：document.getElementById("myId")，但得到一个错误：“无法找到名称文档”。我在其他帖子中看到我们可以使用@ViewChild做类似的事情，但是我不知道如何使用div，有什么想法吗？
浏览 2提问于2017-03-04得票数 34
回答已采纳
2回答
使用指令将组件动态添加到子元素
javascript、angular、typescript、components、angular2-directives
尝试使用指令将组件动态放置到子元素。
组件(作为模板)：
@Component({
selector: 'ps-tooltip',
template: `
<div class="ps-tooltip">
<div class="ps-tooltip-content">
<span>{{content}}</span>
</div>
</div>
`
})
export class TooltipCompon
浏览 0提问于2017-03-05得票数 9
1回答
没有将"exportAs“设置为"amgTooltip”的指令
angular、angular-material、angular-directive
我做了一个指令，它继承了MatTooltip和Angular Material。我知道这在this SO question中是可能的。然而，当我尝试使用它时，我得到了以下错误： There is no directive with "exportAs" set to "amgTooltip" 这是指令中的代码，其中包含一个构造函数，该构造函数调用super上的构造函数。为了简洁起见，在下面的代码中没有显示出来。 如您所见，Directive configuration对象的exportAs属性为'amgTooltip‘。 @Directive({
浏览 10提问于2019-01-26得票数 2
回答已采纳
2回答
我使用Angular 9并使用ViewChild和ViewChildren来选择我的HTML文件中存在的元素。这两个函数中有支持类选择器的吗？据我所知，它们只适用于身份证。 @ViewChild('.foo') Foo: ElementRef; 任何替代方法也是好的，只是在函数执行期间，我希望能够访问所有的'Foo‘对象。 https://angular.io/api/core/ViewChild https://angular.io/api/core/ViewChildren 谢谢!
浏览 14提问于2020-07-18得票数 2
回答已采纳
6回答
MatSort未定义-角度5
angular、angular-material、angular5
我正在尝试在我的angular应用程序中实现一个材料表。分页和过滤器工作得很好，但是我不能对我的表进行排序。我对MatSort的引用是未定义的。
我确实在AppModule中导入了它：
import {MatTableModule} from '@angular/material/table';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule, MatCheckboxModule,MatPaginatorModule,MatInputModul
浏览 0提问于2018-06-06得票数 9
1回答
从父组件获取角形子组件的offsetHeight
angular
从父组件获取计算角度的子组件高度的最佳方法是什么？我有一个类似下面的组件
import { Component, ViewChild } from 'angular2/core';
(...)
@Component({
selector: 'my-app',
template: `
<h1>My Add Angular 8 app</h1>
<ng-container *ngFor="let item of list>
浏览 2提问于2020-05-14得票数 0
3回答
如何使用angular 4从父元素获取子DOM元素引用
angular、angular-components
我需要使用angular 4从父组件获取子组件DOM引用，但我无法访问子组件DOM，请指导我如何实现这一点。
parent.component.html
<child-component></child-component>
parent.component.ts
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'parent-component',
tem
浏览 2提问于2017-12-15得票数 10
回答已采纳
2回答
如何在Angular组件中执行DOM操作？
angular、typescript、angular2-components、angular5
我们如何在Angular ( 2.x及更高版本)中获取DOM元素？诸如addClass、removeClass等基本功能在typescript中不可用，那么我们如何在angular组件中进行这些DOM操作呢？如果有的话，请给我建议。提亚
浏览 0提问于2016-11-07得票数 12
回答已采纳
7回答
“‘mat工具栏”不是已知的元素-角5
angular-material、angular5
我已经创建了一个新项目，我正在尝试添加angular-material。
我在我的material.module.ts文件夹中创建了app：
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
浏览 0提问于2018-05-03得票数 30
回答已采纳
2回答
如何配置我的Angular库以依赖于Angular材质？
angular、angular-material、angular-library
我已经将Angular Material安装到我的库中，并创建了一个导入和导出所有Material组件的共享资源模块。现在我有一个文件夹，其中包含一个模块和一个组件。模块声明/exports包含组件，imports数组导入共享材料模块。
由于某些原因，该组件不会在storybook中创建故事，也不会通过任何单元测试，因为它找不到从共享资源导入的MatRadioModule。
这是我得到的错误：
模板分析错误：'mat-radio-button‘不是已知元素: 1.如果'mat-radio-button’是一个角度组件，请验证它是否为此模块的一部分。2.如果'mat-ra
浏览 14提问于2020-06-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
