使用AngularDart的App Layout不会在Drawer上显示Item

问题描述 投票:1回答:2

我正在尝试重现以下App Layout Demo(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>

但它没有在抽屉上显示项目。看到:

enter image description here

浏览器控制台中也存在错误:

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

可能是什么问题呢?

angular dart angular-dart dart-webui
2个回答
5
投票

错误消息表示缺少materialProviders

@Component(
  selector: 'my-app',
  providers: const <dynamic>[materialProviders],

它们只需要为整个应用提供一次,因此AppComponent是最好的地方。


2
投票

请注意,如果您运行较新版本的AngularDart示例(例如5.0)并且您看到相同的错误(No provider found for DomService.),您可能会发现需要添加以下导入:

import 'package:angular_components/laminate/popup/module.dart';

以下是您的根组件(如Günter所述):

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

按照:https://github.com/dart-lang/angular_components_example/blob/master/lib/app_component.dart#L64

更新:

但是,如果您确实要导入materialProviders - 根据接受的答案 - 只需添加以下导入:

import 'package:angular_components/angular_components.dart';

并将以下内容添加到根组件:

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