Question

我有一个奇怪的人，但不幸的是我没有代码可共享，因为我不确定它是否可以为这篇文章增加价值。

我有两个组成部分（User和Project）。他们都导入Shared，这将完成我所有的材料设计导入，然后将它们重新导出。在我的一个模块上，将类mat-raised-button应用到元素上时，它运行良好，而在另一个模块上，它仅提取了一些CSS并将其注入到页面上的<style>标记中，但是它缺少了注入到工作模块上的工作组件的其他样式。这与我的样式范围无关，因为我可以在两个模块中旋转一个全新的组件，并且它在一个模块上很好用，而在另一个模块上却完全不起作用（除了在该类中添加按钮以外，不做任何其他事情）。

奇怪的是，它正在引入某些mat-raised-button样式，但不是全部。是否存在某种机制可以阻止某些样式的注入？我很乐意发布任何可能有用的代码，但很抱歉，这是一个如此广泛的问题，但不幸的是，我在这里没有太多事情要做...

更新：我进行了一些进一步的挖掘，发现无法使用mat-button类。我尝试将MatButtonModule直接导入失败的模块，并看到相同的行为...仍然无法正常工作。

更新2：按钮在我的根app.component中也不起作用。他们只在我的一个模块上工作。这真的很奇怪。这是工作模块的代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { UserRegistrationComponent } from '../Components/user-registration.component';
import { CreateAccountDialogComponent } from '../Components/create-account-dialog.component';
import { FormsModule } from '@angular/forms';
import { ValidationErrorsComponent } from '../../user/Components/sharedcomponents/validation-errors.component';
import { UserLoginComponent } from '../Components/user-login.component';


@NgModule({
  declarations: [
    UserRegistrationComponent,
    CreateAccountDialogComponent,
    ValidationErrorsComponent,
    UserLoginComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    FormsModule
  ],
  entryComponents: [
    CreateAccountDialogComponent
  ]
})
export class UserModule { }

这是不起作用的模块的代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { ProjectFileUploadComponent } from '../Components/project-file-upload.component';
import { ProjectComponent } from '../Components/project.component';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material';


@NgModule({
  declarations: [
    ProjectFileUploadComponent,
    ProjectComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    MatButtonModule
  ]
})

export class ProjectModule { }

Answer 1

根据您所描述的内容，我认为您可以使用局部样式来抵消全局样式。确定方法是注释掉本地组件中的样式，然后查看您的材质设计样式是否已恢复。

如果是这种情况，您要做的就是在@Component语句中添加并添加ViewEncapsulation.None语句，以停止它以取消外部样式：

@Component({
  selector: 'speed-dial-fab',
  templateUrl: './speed-dial-fab.component.html',
  styleUrls: ['./speed-dial-fab.component.css'],
  animations: speedDialFabAnimations,
  encapsulation: ViewEncapsulation.None
})

所以不是错误的模块。也不是巫毒！

材料设计样式可以在一个模块上工作，而不能在另一个模块上工作

1 个答案: