Я пытался настроить ng2-bootstrap в проекте, созданном с использованием шаблона Angular2 .NET Core (здесь больше информации об этом), но я не могу заставить его работать, проект компилируется и работает правильно, но ng2 Компоненты начальной загрузки просто не работают.
Вот мой package.json:
{
"name": "pined",
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"@angular/common": "^2.4.5",
"@angular/compiler": "^2.4.5",
"@angular/core": "^2.4.5",
"@angular/forms": "^2.4.5",
"@angular/http": "^2.4.5",
"@angular/platform-browser": "^2.4.5",
"@angular/platform-browser-dynamic": "^2.4.5",
"@angular/platform-server": "^2.4.5",
"@angular/router": "^3.4.5",
"@types/node": "^6.0.42",
"rxjs": "^5.2.0",
"zone.js": "^0.7.8",
"angular2-platform-node": "~2.0.11",
"angular2-template-loader": "^0.6.2",
"angular2-universal":"^2.1.0-rc.1",
"angular2-universal-patch": "^0.2.1",
"angular2-universal-polyfills": "^2.1.0-rc.1",
"aspnet-prerendering": "^2.0.0",
"aspnet-webpack": "^1.0.17",
"awesome-typescript-loader": "^3.0.0",
"css": "^2.2.1",
"css-loader": "^0.25.0",
"es6-shim": "^0.35.1",
"event-source-polyfill": "^0.0.7",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"html-loader": "^0.4.4",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.1",
"json-loader": "^0.5.4",
"preboot": "^4.5.2",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.5",
"typescript": "^2.2.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1",
"ng2-bootstrap": "^1.4.0"
},
"devDependencies": {
"@types/chai": "^3.4.34",
"@types/jasmine": "^2.5.37",
"chai": "^3.5.0",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-webpack": "^1.8.0"
}
}
Мой app.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { DropdownModule } from 'ng2-bootstrap';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { SeeAndDictateComponent } from './components/seeAndDictate/seeAndDictate.component';
import { SearchResultsComponent } from './components/searchResults/searchResults.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
SeeAndDictateComponent,
SearchResultsComponent,
HomeComponent
],
imports: [
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'seeAndDictate', component: SeeAndDictateComponent },
{ path: '**', redirectTo: 'home' }
]),
DropdownModule.forRoot()
]
})
export class AppModule {
}
И, наконец, html компонента, в котором я пытаюсь его реализовать.
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<span dropdown (onToggle)="toggled($event)">
<a href id="simple-dropdown" dropdownToggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown">
<li *ngFor="let choice of items">
<a class="dropdown-item" href="#">{{choice}}</a>
</li>
</ul>
</span>
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div dropdown (onToggle)="toggled($event)" class="dropdown profile-element">
<a data-toggle="dropdown" class="dropdown-toggle" href="#" dropdownToggle>
<span class="clear">
<span class="block m-t-xs">
<strong class="font-bold">Marco Antonio Melchor</strong>
</span> <span class="text-muted text-xs block">Implementacion de soluciones <b class="caret"></b></span>
</span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs" dropdownMenu>
<li><a href="#">Cerrar sesion</a></li>
</ul>
</div>
<div class="logo-element">
IN+
</div>
</li>
<li [routerLinkActive]="['link-active']" class="active">
<a href="#"><i class="fa fa-eye-large"></i> <span class="nav-label">Auditoria</span></a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li><a [routerLink]="['/seeAndDictate']">Ver y dictaminar</a></li>
<li><a [routerLink]="['/seeAndDictate']">Seguimiento</a></li>
</ul>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/counter']"><i class="fa fa-th-large"></i> <span class="nav-label">Reportes</span> </a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li><a [routerLink]="['/seeAndDictate']">Aforo / movimiento</a></li>
<li><a [routerLink]="['/seeAndDictate']">Aforo / Ingreso</a></li>
<li><hr /></li>
<li><a [routerLink]="['/seeAndDictate']">Dictaminaciones por usuario</a></li>
</ul>
</li>
</ul>
</div>
</nav>
И ТС:
import { Component } from '@angular/core';
@Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
}
Идея состоит в том, чтобы заставить работать выпадающее меню в ng2-bootstrap.
