如何在AngularDart中应用带角度组件的应用程序布局中的迷你变型抽屉

我想在我的项目中，在有角度省道的角度组件的应用程序布局中应用迷你变型永久抽屉。我试过但没有成功，我怎么能做到

应用css会得到以下结果：如何更改抽屉大小

material-drawer {
        max-width: 56px;
    }

app_component.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
    <material-list *deferredContent>
        <div group class="mat-drawer-spacer"></div>
        <div group>
            <material-list-item>
                <material-icon icon="home"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="send"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="drafts"></material-icon>
            </material-list-item>
        </div>
        <div group>
            <div label>Tags</div>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </material-list-item>
        </div>
    </material-list>
</material-drawer>

<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">Tushar Rai</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 1</a>
            </nav>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 2</a>
            </nav>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 3</a>
            </nav>
        </div>
    </header>

    <div class="app-layout">
        <p>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.
        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.
        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.
        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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
    </div>

    <div class="controls">
        <h3>Options</h3>
        <material-toggle [(checked)]="end" label="end">
        </material-toggle>
    </div>
</material-content>

<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">Tushar Rai</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation" id="twitter">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/twitter-white.png">
                </a>
            </nav>
            <nav class="material-navigation" id="google-plus">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/google-plus-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="facebook">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/facebook-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="pinterest">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/pinterest-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="instagram">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/instagram-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="youtube">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/youtube-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="quora">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/quora-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="linkedin">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/linkedin-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="github">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/github-white.png"/>
                </a>
            </nav>
        </div>
    </header>

    <material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
        <material-list *deferredContent>
            <div group class="mat-drawer-spacer"></div>
            <div group>
                <material-list-item>
                    <material-icon icon="home"></material-icon>Home
                </material-list-item>
                <material-list-item>
                    <material-icon icon="work"></material-icon>Work
                </material-list-item>
                <material-list-item>
                    <material-icon icon="account_circle"></material-icon>About
                </material-list-item>
                <material-list-item>
                    <material-icon icon="contact_mail"></material-icon>Contact
                </material-list-item>
            </div>

            <div group class="navigation-resize">
                <material-button icon>
                    <material-icon icon="arrow_right"></material-icon>
                </material-button>
            </div>
        </material-list>


    </material-drawer>

    <div class="app-layout">
        <p>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.
        </p>
    </div>
    <footer-layout></footer-layout>[![enter image description here][1]][1]
</material-content>

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
import 'package:tr_app/src/firebase_service.dart';

@Component(
    selector: 'my-app',
    directives: const [
      materialDirectives,
      NgIf,
      DeferredContentDirective,
      MaterialButtonComponent,
      MaterialIconComponent,
      MaterialListComponent,
      MaterialListItemComponent,
      MaterialPersistentDrawerDirective,
      MaterialToggleComponent,
    ],
    providers: const [
      materialProviders,
    ],
    templateUrl: 'app_component.html',
    styleUrls: const [
      'app_component.css',
      'package:angular_components/app_layout/layout.scss.css',
    ])
class AppComponent {
  bool end = false;
  final FirebaseService service;
  AppComponent(this.service);
}

---

你非常接近我建议你做两件事： a） 翻转app_component.scss和layout.scss.css的顺序。这允许覆盖具有相同的特异性，并且仍然适用。 b） 抽屉打开的距离由内容的边距宽度决定。因此，您的CSS应该如下所示：

material-drawer[persistent] + material-content {
  margin-left: 56px;
}

material-drawer {
  max-width: 56px;
}

app_component.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
    <material-list *deferredContent>
        <div group class="mat-drawer-spacer"></div>
        <div group>
            <material-list-item>
                <material-icon icon="home"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="send"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="drafts"></material-icon>
            </material-list-item>
        </div>
        <div group>
            <div label>Tags</div>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </material-list-item>
        </div>
    </material-list>
</material-drawer>

<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">Tushar Rai</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 1</a>
            </nav>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 2</a>
            </nav>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 3</a>
            </nav>
        </div>
    </header>

    <div class="app-layout">
        <p>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.
        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.
        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.
        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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
    </div>

    <div class="controls">
        <h3>Options</h3>
        <material-toggle [(checked)]="end" label="end">
        </material-toggle>
    </div>
</material-content>

<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">Tushar Rai</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation" id="twitter">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/twitter-white.png">
                </a>
            </nav>
            <nav class="material-navigation" id="google-plus">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/google-plus-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="facebook">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/facebook-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="pinterest">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/pinterest-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="instagram">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/instagram-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="youtube">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/youtube-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="quora">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/quora-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="linkedin">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/linkedin-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="github">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/github-white.png"/>
                </a>
            </nav>
        </div>
    </header>

    <material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
        <material-list *deferredContent>
            <div group class="mat-drawer-spacer"></div>
            <div group>
                <material-list-item>
                    <material-icon icon="home"></material-icon>Home
                </material-list-item>
                <material-list-item>
                    <material-icon icon="work"></material-icon>Work
                </material-list-item>
                <material-list-item>
                    <material-icon icon="account_circle"></material-icon>About
                </material-list-item>
                <material-list-item>
                    <material-icon icon="contact_mail"></material-icon>Contact
                </material-list-item>
            </div>

            <div group class="navigation-resize">
                <material-button icon>
                    <material-icon icon="arrow_right"></material-icon>
                </material-button>
            </div>
        </material-list>


    </material-drawer>

    <div class="app-layout">
        <p>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.
        </p>
    </div>
    <footer-layout></footer-layout>[![enter image description here][1]][1]
</material-content>

---

您是否也切换了样式表的顺序，例如：styleUrls:const['package:angular\u components/app\u layout/layout.scss.css'，'app\u component.css'，]我已经实现了预期的布局，我想在抽屉底部点击

右箭头

应用抽屉功能的扩展，可能是一个单独的问题？我认为当其他人试图遵循这一思路时，有两个单独的答案会很困难，但基本上您希望在按钮上使用：（trigger）=“drawer.toggle（）”。