Angular CLI 下拉引导答案

【问题标题】：Angular CLI Dropdown-bootstrapAngular CLI 下拉引导
【发布时间】：2016-07-27 13:20:03
【问题描述】：

版本：

//package.json: "devDependencies": { "angular-cli": "1.0.0-beta.10", "bootstrap": "^3.3.6", "codelyzer": "0.0.20", "ember-cli-inject-live-reload": "1.4.0", "font-awesome": "^4.6.3", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "jquery": "^2.2.4", "karma": "0.13.22", "karma-chrome-launcher": "0.2.3", "karma-jasmine": "0.3.8", "node-sass": "^3.8.0", "protractor": "3.3.0", "rxjs": "^5.0.0-beta.6", "ts-node": "0.5.5", "tslint": "3.11.0", "typescript": "1.8.10", "typings": "1.3.1" }

问题

我正在将已经存在的前端从 angular 2 更改为 angular-cli。所有的路由和大部分功能现在都实现了，但是我很久没有实现一个下拉菜单，它只在纯角度 2 中工作：

HTML：

- 结果旧的纯 angular2-app

单击用户时会打开注销）

- 生成新的 Angular cli

我单击用户，前端尝试将我路由到 localhost/#（我将其重定向到我的默认组件）。

备注

我将旧的 css 文件添加到新项目中，因此应该更新（nav navbar 等都已定义）

【问题讨论】：

标签： html dropdown angular-bootstrap angular-cli

【解决方案1】：

想通了：

解决方案

最后我使用了 ng2-dropdown

安装 ng2-dropdown

npm install ng2-dropdown --save-dev

打开 src/System-conf

插入：

const map: any = {
  'jquery': 'vendor/jquery',
  'bootstrap': 'vendor/bootstrap',
  "ng2-dropdown": "vendor/ng2-dropdown"
};

/** User packages configuration. */
const packages: any = {
  "ng2-dropdown": { "main": "index.js", "defaultExtension": "js" }
};

如您所见，我们仍然需要引导程序，当然还有 jquery（也可以使用 npm 安装）

打开 angualr-cli-build.js（在 ./ 中）

输入：

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
     [. . .],
      'ng2-dropdown/**/*.+(js|js.map)'
    ]
  });
};

这会将代码复制粘贴到我们的 dist-Directory 中

并在html-File中使用如下图（别忘了在组件中导入并使用dropdown_directives）

import { Component } from '@angular/core';

// vvvvvvvvvvvvvvvvv--NEW--vvvvvvvvvvvvvvvvvvvvv
import {DROPDOWN_DIRECTIVES} from "ng2-dropdown";
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  // vvvvvvvvvvvvvvvvv--NEW--vvvvvvvvvvvvvvvvvvvvv
  directives: [DROPDOWN_DIRECTIVES]
  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
})
export class AppComponent {
  title = 'app works!';
}

<div class="dropdown" dropdown>
  <button class="btn btn-primary" dropdown-open>My Heroes</button>
  <ul class="dropdown-menu">
    <li><a href="#">Badman</a></li>
    <li><a href="#">Sadman</a></li>
    <li><a href="#">Lieman</a></li>
  </ul>
</div>

希望能帮助到其他开发者！

编辑

Codesnipets 不起作用，它们需要在 ng-cli 或 ng 项目中！

/编辑

【讨论】：