Выпадающее меню Bootstrap с использованием ngx-bootstrap

Я бы установил ngx-bootstrap в angular2, используя команду ниже npm install ngx-bootstrap bootstrap --save

включены ниже строк в angular-cli.json

 "../node_modules/bootstrap/dist/css/bootstrap.min.css".

В app.component.html добавлены строки ниже

  <div  class="dropdown">
     <a class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
     </ul>                                      
  </div>

Приведенный выше код не работает для раскрывающегося списка начальной загрузки Но раскрывающееся меню не работает. Пожалуйста, помогите мне.

Мой package.json - это

{
 "name": "offline-new",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
 },
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"@types/hammerjs": "^2.0.35",
"angular2-drag-scroll": "^1.4.4",
"angular2-fontawesome": "^0.9.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jsstore": "^1.2.6",
"ng2-materialize": "^1.3.2",
"ngx-bootstrap": "^2.0.0-beta.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
 },
 "devDependencies": {
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}

Спасибо


typescript angular ngx-bootstrap
person kamalav    schedule 20.11.2017    source источник
comment
Вы должны предоставить фрагменты кода, который у вас есть, и некоторые объяснения того, что вы ожидаете от своего кода.   -  person versvs    schedule 20.11.2017

Ответы (1)


arrow_upward
6
arrow_downward

Вы добавили это в свой app.module.ts ??

import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

также обновите свой app.component.html до

<div  class="dropdown" dropdown>
    <a dropdownToggle class="pull-right text-center btn btn-setting dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"><i class="fa fa-cog"></i></a>
    <ul *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation">  <a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-cog"></i>Settings</a></li>
    </ul>
</div>
person Rowel de Guzman    schedule 20.11.2017
comment
Я добавил это. Но я получил ./node_modules/ngx-bootstrap/dropdown/bs-dropdown.directive.js 247: 16-25 экспорт «Renderer2» не был найден в предупреждающей ошибке «@ angular / core» и не могу устранить все параметры для BsDropdownContainerComponent: ([object Object], [object Obje…, ошибка консоли - person kamalav; 20.11.2017
comment
Можете ли вы показать нам свой package.json. возможно, вы используете версию, которая не поддерживает angular v4 и выше, или пытаетесь изменить версию ngx-bootstrap на ^2.0.0-beta.8 - person Rowel de Guzman; 20.11.2017
comment
Я думаю, "ngx-bootstrap": "^2.0.0-beta.8" не поддерживает angular 2.x, вы пробовали проверить обратную совместимость? или вы пытались обновить Angular до последней версии? и перед этим убедитесь, что у вас есть резервная копия вашего старого кода. - person Rowel de Guzman; 21.11.2017
comment
спасибо.Я обновил angular5. теперь он работает нормально. - person kamalav; 21.11.2017
comment
Но после обновления навигация по маршруту с помощью route.navigate не работает. - person kamalav; 21.11.2017
comment
как вы используете свой route.navigate? можешь показать часть своего кода? - person Rowel de Guzman; 21.11.2017
comment
это. router.navigate (['кино']); и пробовал это. router.navigate (['/ cinema']); также. мой URL-адрес изменен, но не происходит переход к компоненту, который работал в предыдущей версии (2) - person kamalav; 21.11.2017
comment
нет сообщения об ошибке. это из-за ngif. теперь он работает нормально. спасибо - person kamalav; 21.11.2017
comment
@RoweldeGuzman только один вопрос, если я хочу добавить условие в dropdownToggle. Я имею в виду, что если условие истинно, то только файлы dropdownToggle не отображаются. любая функция в angular для достижения этой цели. - person Hitsa; 19.03.2020