Angular 15 - 迁移到基于 MDC 的 Angular 材料组件

Question

将我的 Angular 应用程序更新到 V15，应用程序工作正常，但由于应用于材质元素标签样式名称的样式（如（

.mat-form-field

、

.mat-raised-button

...等）），某些组件样式被破坏了

如果我将标签更改为

.mat-**mdc**-raised-button

，它就可以工作。所以我的问题在这里 我怎样才能立即解决这个问题，而不是更改每个文件中的代码。

还想知道企业应用程序的最佳实践是什么，我们应该在材质应用的标签上应用样式还是始终使用 CSS 类名？

Answer 1

运行

mdc-migration

后，我仍然发现一些地方使用了旧的

.mat-...

，没有

-mdc

后缀。最容易找到它们的是负向前瞻正则表达式组。

正则表达式：

\.mat-(?!mdc|icon)

。这会匹配后面没有

.mat-

的每个

mdc

字符串。

使用 VSCode 很容易找到它们，或者也可以替换它们。

要运行迁移，请使用以下命令：

ng generate @angular/material:mdc-migration
# or
nx generate @angular/material:mdc-migration

编辑：原始正则表达式已更改。

.mat-icon

也被保留，因为它是基于 Odilbek 的评论。

Answer 2

遵循 Angular Material 迁移指南 迁移到基于 MDC 的 Angular Material 组件：如何迁移更新到 Angular 15 后，您可以运行以下命令来让它尝试迁移您的代码：

ng generate @angular/material:mdc-migration

迁移更改了我的代码中的以下一些内容：

• CSS 添加 -mdc-
  

  .mat-header-cell

  到
  

  .mat-mdc-header-cell

• 导入删除旧版
  

  import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';

  到
  

  import { MatTable } from '@angular/material/table';

• 添加评论
• ...

您可以按照官方的Angular更新指南找到此类链接。选择正确的版本，选中框

I use Angular Material

并将应用程序复杂性切换到

Advanced

以查看所有信息。

Answer 3

如果您使用 Nx Workspace，则可以使用以下命令：

nx g @angular/material:mdc-migration

Answer 4

我在旧组件上遇到了同样的问题，这个命令似乎可以解决问题：

ng generate @angular/material:mdc-migration

Answer 5

对于我的情况，androbin给出的答案非常有帮助。

如果遇到这种情况（请看到最后...）

我会简单地记住对类的用例做同样的事情。

搜索：“mat-(?!mdc) 替换为：”mat-mdc-

之后，我注意到只有 sidenav 没有更新，他们仍在使用 mat-sidenav、mat-sidenav-content 等： 更改类名称后的 IMG 侧导航

我正在使用：“@angular/material”：“^16.1.4”。我不确定这是否是由于我的错误而导致的孤立案例。

---

我喜欢问题的最后部分。 我认为这是一次很好的公开讨论。

还想知道企业应用程序的最佳实践是什么，我们应该在材质应用的标签上应用样式还是始终使用 CSS 类名？

我的回答

我喜欢始终使用 CSS 类名。我使用这个约定： 与 Angular Material 团队给出的名称相同，并在末尾添加修饰符，通常是 --name-of-project。

情况

上面的做法导致了第二个问题。仅替换 CSS 类的声明后。

反思

这不是 Angular Material 团队建议的。

内部组成元素

避免任何自定义样式或覆盖 Angular Material 组件中的内部元素。应用于每个组件的 DOM 结构和 CSS 类可能随时发生变化，导致自定义样式被破坏。

这就是我所做的。但我并不害怕，因为我知道足够的 CSS 来修复一些更改后的自定义样式中断。