Dart 如何随媒体屏幕大小的变化关闭材料抽屉？

如何在更改媒体屏幕时将抽屉的可见性从持久抽屉更改为临时抽屉。我想将抽屉的响应实现为持久的

@媒体屏幕和（最小宽度：701px）

和临时的

@媒体屏幕和（最大宽度：700px）

。在角省道项目中使用角省道组件的应用省道布局

app_component.html

<material-drawer persistent #drawer="drawer"
    [class.custom-width]="customWidth"
    [attr.end]="end ? '' : null">
  <material-list *deferredContent>
    <div group class="mat-drawer-spacer"></div>
    <div group>
      <material-list-item>
        <material-icon icon="inbox"></material-icon>Inbox
      </material-list-item>
      <material-list-item>
        <material-icon icon="star"></material-icon>Star
      </material-list-item>
      <material-list-item>
        <material-icon icon="send"></material-icon>Sent Mail
      </material-list-item>
      <material-list-item>
        <material-icon icon="drafts"></material-icon>Drafts
      </material-list-item>
    </div>
    <div group>
      <div label>Tags</div>
      <material-list-item>
        <material-icon icon="star"></material-icon>Favorites
      </material-list-item>
    </div>
  </material-list>
</material-drawer>
<div class="material-content">
  <header class="material-header shadow">
    <div class="material-header-row">
      <material-button icon
          class="material-drawer-button" (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
      </material-button>
      <span class="material-header-title">Simple Layout</span>
      <div class="material-spacer"></div>
      <nav class="material-navigation">
        <a>Link 1</a>
      </nav>
      <nav class="material-navigation">
        <a>Link 2</a>
      </nav>
      <nav class="material-navigation">
        <a>Link 3</a>
      </nav>
    </div>
  </header>
  <div>
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
    legere iriure blandit. Veri iisque accusamus an pri.
  </div>
  <div class="controls">
    <h3>Options</h3>
    <material-toggle [(checked)]="end" label="end">
    </material-toggle>
    <material-toggle [(checked)]="customWidth" label="custom width">
    </material-toggle>
  </div>
</div>

app_component.scss

@import 'package:angular_components/app_layout/mixins';

:host {

}

.controls {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.custom-width {
  @include mat-drawer-width(50%);
  @include mat-temporary-drawer-width(50%);
}

@media screen and (min-width: 701px) {

}

@media screen and (max-width: 700px) {

}

---

简而言之，你不能只使用CSS，因为它们是独立的组件，而不仅仅是CSS

根据屏幕大小的不同，可能会有两个抽屉，但这不是我们支持或计划支持的模式。对不起

@import 'package:angular_components/app_layout/mixins';

:host {

}

.controls {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.custom-width {
  @include mat-drawer-width(50%);
  @include mat-temporary-drawer-width(50%);
}

@media screen and (min-width: 701px) {

}

@media screen and (max-width: 700px) {

}