如何使用 Typescript 在 Angular 上初始化 mdb 工具提示？答案

【问题标题】：How do I initialize mdb tooltips on Angular with Typescript?如何使用 Typescript 在 Angular 上初始化 mdb 工具提示？
【发布时间】：2023-01-09 20:36:38
【问题描述】：

我在我的角度项目上使用 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-z\d$@$!%*?&].{8,}')])
    })
  }

  onSubmit() {
    console.log(this.registerForm)
  }

}````

【问题讨论】：

也请分享模板文件代码。

标签： angular typescript mdbootstrap

【解决方案1】：

请尝试以下希望这对您有用

在您的项目中安装 MDB ANGULAR UI KIT，在终端中轻松键入以下命令：

npm i mdb-angular-ui-kit

然后将单个 MDB 模块的导入添加到 app.module.ts 以使用特定组件。例如使用工具提示：

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>

【讨论】：