使用 angularDart 修复了 angular 个组件的 header 应用程序布局

Question

我正在尝试使用以下代码修复应用程序布局中的 header 和抽屉，但 header 导航没有响应，导航项移到屏幕右侧.由于结果在运行附加代码之后的第二张图片中。

/* Drawer */
material-drawer .adf-drawer {
  position: fixed;
}


/* Header */
material-content header {
  position: fixed;
}

Header错误图片

抽屉错误图片 app_layout.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
    <material-list *deferredContent class="adf-drawer">
        <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 visible-desktop">AngularDart + Firebase</span>
            <span class="material-header-title visible-mobile">AD + FB</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 2</a>
            </nav>
            <nav class="material-navigation">
                <material-button icon>
                    <material-icon icon="more_vert"></material-icon>
                </material-button>
            </nav>
            <login-logout></login-logout>
        </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>
    </div>
</material-content>

app_layout.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:yns_app/src/component/login-logout/login_logout_component.dart';

@Component(
    selector: 'app-layout',
    directives: const [
      materialDirectives,
      DeferredContentDirective,
      MaterialButtonComponent,
      MaterialIconComponent,
      MaterialListComponent,
      MaterialListItemComponent,
      MaterialPersistentDrawerDirective,
      MaterialToggleComponent,
      LoginLogoutComponent,
    ],
    templateUrl: 'app_layout.html',
    styleUrls: const [
      'app_layout.css',
      'package:angular_components/app_layout/layout.scss.css',
    ])
class AppLayoutComponent {
  bool end = false;
}

app_layout.scss

@import 'package:angular_components/css/material/material';

:host {
  display: block;
  overflow: hidden;
}

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

a:link, a:visited, a:active, a:hover {
  color: $mat-white;
  text-decoration: none;
}

/* Drawer */
material-drawer .adf-drawer {
  position: fixed;
}


/* Header */
material-content header {
  position: fixed;
}

Answer 1

app_component.html

<material-content>
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
    <material-list *deferredContent class="adf-drawer">
        <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>
    <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 visible-desktop">AngularDart + Firebase</span>
            <span class="material-header-title visible-mobile">AD + FB</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 2</a>
            </nav>
            <nav class="material-navigation">
                <material-button icon>
                    <material-icon icon="more_vert"></material-icon>
                </material-button>
            </nav>
            <login-logout></login-logout>
        </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>
    </div>
</material-content>

app_component.css

material-content material-drawer {
    position: fixed;
}

material-content header {
    position: fixed;
}

使用 angularDart 修复了 angular 个组件的 header 应用程序布局

Application layout fixed header of angular components with angularDart

dart

dart-webui

dart-html

angular-dart

angular-components