在AngularJs/Angular混合中不应用mat-form-field matInput默认样式

Question

我有一个AngularJs/Angular12.0。5个混合应用程序，我在向上移动到适当的角度。

在mat表单字段中使用具有matInput属性的输入时，它似乎只显示占位符/标签值，而不应用任何其他样式。如图所示：

不确定是什么原因导致了这种情况，因为角度材质模块已正确导入，并且显示这些字段时没有控制台错误。下面是我的代码：

应用程序模块

import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import {HttpClientModule} from "@angular/common/http";
import moduleName from "./angularJS.module";
import {UIRouterUpgradeModule} from "@uirouter/angular-hybrid";
import {NgModule} from "@angular/core";
import {UserProfileModule} from "./app/modules/user/user-profile.module";

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        UpgradeModule,
        UserProfileModule,
        UIRouterUpgradeModule.forRoot()
    ]
})

export class AppModule {
    constructor(private upgrade: UpgradeModule) {
        console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
        upgrade.bootstrap(document.body, [moduleName], {strictDi: true});
    }

    ngDoBootstrap() {
    }
}

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        BrowserAnimationsModule,
        FlexLayoutModule,
        FormsModule,
        MatToolbarModule,
        MatFormFieldModule,
        MatInputModule,
        MatSelectModule,
        MatButtonModule,
        MatTableModule,
        MatSlideToggleModule,
        ReactiveFormsModule
    ]
})
export class SharedModule { }

用户配置文件模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserProfileComponent } from './user-profile.component';

import { SharedModule } from "../../shared/shared.module";

@NgModule({
    declarations: [
        UserProfileComponent
    ],
    imports: [
        CommonModule,
        SharedModule
    ],
    exports: [
        UserProfileComponent
    ],
    entryComponents: [
        UserProfileComponent
    ]
})
export class UserProfileModule { }

用户简介组件

import {Component} from "@angular/core";
import {downgradeComponent} from "@angular/upgrade/static";
import angular from "angular";

@Component({
    selector: "user-profile",
    template: require("./user-profile.html")
})
export class UserProfileComponent {
    constructor() { }
}

angular
    .module('app')
    .directive("userProfile", downgradeComponent({
        component: UserProfileComponent
    }) as angular.IDirectiveFactory);

用户配置文件HTML

<div fxFill fxLayout="column" [class.mat-elevation-z1]="true">
    <mat-toolbar>
        <div class="profile-header">
            <h4>User Profile</h4>
        </div>
    </mat-toolbar>
    <form fxLayout="column">
        <mat-form-field>
            <input matInput placeholder="First Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Last Name">
        </mat-form-field>
        <mat-form-field appearance="legacy">
            <mat-label>Standard form field</mat-label>
            <input matInput placeholder="Placeholder">
            <mat-hint>Hint</mat-hint>
        </mat-form-field>
    </form>
</div>

Answer 1

我通过执行以下操作修复了此问题

打开angular.json
1. 导航到项目

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
],

Answer 2

原来我错过了Angular为其元素样式所需的默认主题。

我添加了一个材料主题。scss文件在我的根目录中，并在main中链接它。ts立即解决了问题。

材料主题

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

主要TS

import'/材料主题。scss'