带有 AngularDart 的应用程序布局不会在抽屉上显示项目答案

【问题标题】：App Layout with AngularDart does not show Item on Drawer带有 AngularDart 的应用程序布局不会在抽屉上显示项目
【发布时间】：2018-02-16 06:22:02
【问题描述】：

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

但它不显示抽屉上的项目。见：

浏览器控制台也报错：

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

可能是什么问题？

【问题讨论】：

浏览器控制台是否有任何错误？您是否将所有指令添加到组件（如示例代码中）？
浏览器控制台出现错误：EXCEPTION: Invalid argument(s): No provider found for DomService. html_dart2js.dart:3559。我不知道为什么！正在使用指令：directives: const [ ... ,MaterialListComponent, MaterialListItemComponent, ],

标签： angular dart angular-dart dart-webui

【解决方案1】：

错误信息表示materialProviders 丢失

import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  providers: [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]

【讨论】：