3

在完成 Angular 的 MobileToolkit 指南 ( https://github.com/angular/mobile-toolkit/blob/master/guides ) 后，我想为我的应用程序带来一些额外的组件......比如 sidenav！

就像教程教我的一样，我添加了使用 SideNav 组件所需的所有代码......

这是我的 app.component.ts 导入：

在此处输入图像描述

这是指令注册：

在此处输入图像描述

添加的外部包（前两个来自提到的教程）：

在此处输入图像描述

和所有的出口（同样，来自教程）：

在此处输入图像描述

一切就绪后，我执行“ng serve”命令，然后……嗯：

在此处输入图像描述

经过一番研究，我在网上发现了类似的问题，但其中大多数要么与缺少的 Angular 包（http）有关，要么与旧的 Angular2 版本有关。这里不是这种情况，因为我使用的是最新版本并且 http 包已经到位（在 node_modules 和 dist 文件夹中）

如果你想深入挖掘：https ://github.com/d0cz/t-tracker/tree/master

4

1 回答 1

2

昨天我有一个类似的问题得到解决updating angular-cli-build.js，如下所示（见底部@angular2-material 条目）

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      '@angular2-material/**/*.js'
    ]
  });
};

我希望这有帮助

更新

可能是你失踪了

  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  }

在系统配置.js

更新 2 - 打开 sidenav

这是我用来打开sidenav的代码

<md-sidenav #sidenav (open)="mybutton.focus()" align="start">
     ......
  </md-sidenav>

    <button (click)="sidenav.toggle()"></button>

请注意，单击按钮会触发 sidenav 的 toggle() 方法。这是我在 angular2-material https://github.com/jelbourn/material2-app上找到的演示

于 2016-05-19T20:34:54.777 回答