Question

我正在尝试使用“带有背景动画边框的输入-材质2.0”输入，如下所示：https://mdbootstrap.com/docs/jquery/forms/inputs/#animated-inputs

我还在使用“延迟加载”方法（关于路由）。

这是原始文件

这就是它的工作方式

这实际上是〜

问题是“输入字段”无法正常工作。输入数据时，字符“覆盖”标签

如何解决？如果这需要特定的模块，那么在哪里可以找到每个组件所需的必要模块的信息？或者-在ng generate component文件中为“单独的组件”创建“单独的组件”（使用module.ts）时，是否必须导入〜all〜MDB模块（或材料模块）？

ETA：

我在这里看到了此消息： Angular Material Date-Picker is not working properly

我已将Angular Material添加到项目中（请参见下面的package.json）
我尝试在BrowserAnimationsModule中如下添加authorizatin.module.ts：

从'@ angular / core'导入{NgModule}; 从'@ angular / common'导入{CommonModule}; 从'./authorization-routing导入{AuthorizationRoutingModule}。模块”；

从“ @ angular / platform-browser / animations”导入{BrowserAnimationsModule};

[...片段...]

@NgModule（{ 声明： [authRoutingComponents]，导出：[authRoutingComponents， AuthorizationRoutingModule ]，导入：[BrowserAnimationsModule，通用模块按钮模块 AuthorizationRoutingModule，

但出现以下错误

Uncaught (in promise): Error: BrowserModule has already been loaded.

同样，对此问题的任何信息都将受到赞赏。

添加BrowserAnimationsModule时出现错误

文件：package.json

{
  "name": "trading",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@fortawesome/fontawesome-free": "^5.12.0",
    "@types/chart.js": "^2.9.12",
    "animate.css": "^3.7.2",
    "chart.js": "^2.5.0",
    "easy-pie-chart": "^2.1.7",
    "hammerjs": "^2.0.8",
    "ng-uikit-pro-standard": "git+https://oauth2:<api_key>c@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "rxjs": "~6.4.0",
    "screenfull": "^3.3.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.23",
    "@angular/cli": "~8.3.23",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

文件：login.component.html

<div>   <!--Form with header-->   <div class="card">
    <div class="card-block">

      <!--Header-->
      <div class="form-header  purple darken-4">
        <h3><i class="fa fa-lock"></i> Login:</h3>
      </div>

      <!--Body-->
      <div class="md-form">
        <i class="fa fa-envelope prefix"></i>
        <input type="text" id="form2" class="form-control">
        <label for="form2">Your email</label>
      </div>

      <div class="md-form">
        <i class="fa fa-lock prefix"></i>
        <input type="password" id="form4" class="form-control">
        <label for="form4">Your password</label>
      </div>

      <div class="text-center">
        <button class="btn btn-deep-purple">Login</button>
      </div>

    </div>

    <!--Footer-->
    <div class="modal-footer">
      <div class="options">
        <p>Not a member? <a href="#">Sign Up</a></p>
        <p>Forgot <a href="#">Password?</a></p>
      </div>
    </div>

  </div>   <!--/Form with header--> </div>

文件：login.component.ts

import { Component, OnInit } from '@angular/core';
// MDB Angular Pro

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

文件：authorization-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// components that we need to navigate to
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { RegisterComponent } from './register/register.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routesAuth : Routes = [
    { path: 'login' , component: LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'forgot-pass' , component: ForgotPasswordComponent },
    { path: '**' , component: PageNotFoundComponent }
];

@NgModule({
    imports: [ RouterModule.forChild(routesAuth)], 
    exports: [ RouterModule ],
    declarations: [   ]
  })

export class AuthorizationRoutingModule {}

export const authRoutingComponents = [ LoginComponent, RegisterComponent, ForgotPasswordComponent, PageNotFoundComponent ]

文件：authorization.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorizationRoutingModule } from './authorization-routing. module';


import { authRoutingComponents  } from './authorization-routing. module';

// items that go with the Component
import { AccordionModule } from 'ng-uikit-pro-standard';
import { CardsModule } from 'ng-uikit-pro-standard';
import { CheckboxModule } from 'ng-uikit-pro-standard';
import { IconsModule } from 'ng-uikit-pro-standard';
import { ButtonsModule } from 'ng-uikit-pro-standard';

@NgModule({
  declarations: 
            [ authRoutingComponents  ],
  exports:  [  authRoutingComponents, 
              AuthorizationRoutingModule 
            ],
  imports:  [ CommonModule, 
              ButtonsModule,
              AuthorizationRoutingModule,     
              AccordionModule, 
              CardsModule,
              CheckboxModule,
              IconsModule
            ]
})

export class AuthorizationModule { }

Answer 1

您提供的代码来自MDB jQuery版本。以下是Angular版本的文档：https://mdbootstrap.com/docs/angular/forms/inputs/

您需要在输入元素中添加'mdbInput'指令，并在模块导入中包含InputsModule.forRoot()。

MDBootstrap角度材料动画不适用于输入字段

1 个答案: