1
scrolling 내용이 material-content 인 동안 AngularDart가 포함 된 각도 구성 요소의 응용 프로그램 레이아웃에 서랍 가장자리가 그려지지 않습니다. 어떻게 해결할 수 있습니까?앵귤러 다트가있는 각 구성 요소의 응용 프로그램 서랍 가장자리
material-content {
max-height: 100%;
overflow-y: scroll;
}
: 
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="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>
<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 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="content-test">
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.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.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.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.
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.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.
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.
</div>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
</div>
</material-content>
app_component.dart이 문제를 해결하는
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
styleUrls: const [
'app_component.css',
'package:angular_components/src/components/app_layout/layout.scss.css'],
directives: const [
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
MaterialListComponent,
MaterialListItemComponent,
],
providers: const [materialProviders],
)
class AppComponent {
bool end = false;
}
