angular - 使用AngularDart的应用布局不会在抽屉上显示项目

Question

我正在尝试重现以下应用布局演示(app_layout_demo)示例:

https://github.com/dart-lang/angular_components_example/tree/master/lib/src/app_layout_demo

抽屉中应显示以下项目:

<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>

但是它不会在抽屉上显示Item。看到:



浏览器控制台中还有一个错误:

EXCEPTION: Invalid argument(s): No provider found for DomService. html_dart2js.dart:3559

可能是什么问题呢？

Answer 1

错误消息表示缺少materialProviders

import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  providers: [materialProviders],

只需为整个应用程序提供一次即可，因此AppComponent是最佳选择。