我如何用Typescript初始化Angular上的mdb工具提示?

Question

我在我的angular项目中使用mdb，我想在我的密码输入上显示一个工具提示，以显示对用户的限制。

我试着把data-mdb-toggle="tooltip"和它旁边的html输入标签的标题，但我看到mdb工具提示必须初始化。我不知道如何使用Typescript，这是我的。ts文件:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
registerForm!: FormGroup;
constructor() {}
ngOnInit(): void {
this.registerForm = new FormGroup({
nome: new FormControl(null, Validators.required),
cognome: new FormControl(null, Validators.required),
team: new FormControl(null, Validators.required),
genere: new FormControl(null, Validators.required),
anno: new FormControl(null, [Validators.required, Validators.max(2005), Validators.min(1964)]),
email: new FormControl(null, [Validators.required, Validators.email]),
password: new FormControl(null, [Validators.required,Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&].{8,}')]),
})
}
onSubmit() {
console.log(this.registerForm);
}
}

Answer 1

使用以下命令安装ui kit:npm i mdb-angular-ui-kit

将MdbTooltipModule导入到app.module.ts文件中，如下所示:

import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
@NgModule({
...
imports: [
MdbTooltipModule,
]
...
})

确保在样式表中导入mdbstylesheet

// MDB SCSS
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";

你的HTML模板代码如下:

<a
mdbTooltip="Tooltip on top"
placement="top"
>
Tooltip on top
</a>

Answer 2

请在下面尝试，希望这将为您工作

在你的项目中安装MDB ANGULAR UI KIT，在终端输入以下命令:

npm i mdb-angular-ui-kit

然后在app.module.ts中添加单个MDB模块的导入，以使用特定的组件。例如使用tooltip:

import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
…
@NgModule ({
...
imports: [MdbTooltipModule],
...
})

然后在html模板

<p class="mb-0">
Hover the link to see the
<a href="#" mdbTooltip="Hi! I'm tooltip" #tooltip="mdbTooltip">tooltip</a>
</p>