时间戳

首页 > 解决方案 > Angular Material 无法更改 mwl-calendar-week-view 中的 eventCalendar 宽度

angular - Angular Material 无法更改 mwl-calendar-week-view 中的 eventCalendar 宽度

问题描述

我正在使用 Angular 日历并显示日历事件，对于周视图，我想根据 ts 组件中的变量动态更改事件宽度，但我未能实现这一点。

这是周视图的代码

  <mwl-calendar-week-view
    *ngSwitchCase="CalendarView.Week"
    [viewDate]="viewDate"
    [events]="events"
    [locale]="locale"
    [refresh]="refresh"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-week-view>

我尝试向日历周元素添加一些样式属性，例如 [style.width.%]="value" 或 [style.width.px]="value" 但事件宽度仍然是 fix 。

我想要实现的与第 169 行中的这个 stackblitz 项目完全相同：https ://stackblitz.com/edit/angular-ukwpj8-xjmtxl?file=demo%2Fcustom-week-view.component.ts

但是这个项目结构与我的项目结构有点不同，所以我如何在我的项目中实现这一点

标签： angularangular-materialangular-calendar

解决方案

如果不查看您的其余代码，则很难说出问题所在。然而，我可以告诉你，Angular 组件通常封装了它们的 CSS 类，这意味着如果一个 Angular 组件包含另一个 Angular 组件，那么在父级中定义的 CSS 对子级没有影响。

您使用的日历是 Angular 组件，因此您将无法从包含日历的组件中影响日历的任何样式。

要打破这种封装，您需要在父级中使用 ::ng-deep 伪类。像这样的东西：

::ng-deep .css-class-you-want-to-change: {
    width: 400px;
  }

我通常做的是使用 Chrome 的 Inspect Element 功能来找到我想要更改的内容，并尝试在 Chrome 开发人员工具中更改样式。如果可行，我只需获取要更改的 CSS 类的名称（或必要时更具体的选择器），然后将其放在 ::ng-deep 中。

最后，我应该提一下，仅仅修改整个 Angular 组件的宽度可能不是实现结果的正确方法，尽管有时它会起作用。通常，您需要深入研究组成 Div 的组件，以找到影响您要更改的样式的内容。

推荐阅读