Пытаюсь портировать пример ng-bootstrap, но ngbDropdownToggle работает - PullRequest
3 голосов
/ 21 марта 2019

Я новичок в Angular и Bootstrap, поэтому заранее прошу прощения, если этот вопрос несколько простой и немного широкий.

В целях тестирования / обучения я пытаюсь перенести в свой новый проект пример "Mixed menu items and form 'Toggle Dropdown'" Stackblitz из https://ng -bootstrap.github.io / # / components / dropdown / examples , и хотя я могу заставить HTML отображаться, я не могу заставить выпадающую кнопку переключаться.

Я пробовал два подхода:

  1. Я создал проект, а затем скопировал в соответствующие файлы src / app из коллекции Stackblitz в папку проекта src / app (то есть app.component.html, app.component.ts, app.module.ts, dropdown-form.html, dropdown-form.ts).При таком подходе HTML отображался, но выпадающий список не переключался.

  2. В качестве второй попытки я попытался скопировать всю коллекцию Stackblitz в ее собственную папку и попытался запустить ng serve на ней.При таком подходе ничего не компилировалось, и было много сообщений об ошибках, начиная с Could not find module "@angular-devkit/build-angular" . . .

Один конкретный вопрос, который у меня возник, - где находится директива ngbDropdownToggle?

т.е. из dropdown-form.html:

<button class="btn btn-outline-primary" id="dropdownForm1" ngbDropdownToggle>Toggle dropdown</button>

На Stackblitz я заметил зависимость в package.json для "@ng-bootstrap/ng-bootstrap" и подумал, находится ли там директива ngbDropdownToggle, но когда япопытался добавить эту зависимость в файл package.json в моем первоначальном проекте, компилятор пожаловался: Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap'.Я предполагаю, что в моем первоначальном проекте отсутствует ключевой ng-bootstrap импорт / функциональность, но я не уверен, правильно ли это, и если да, то как мне добавить необходимый импорт / функциональность?

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

1 Ответ

2 голосов
/ 21 марта 2019

, чтобы заставить его работать на stackblitz, вам нужно добавить зависимость @ng-bootstrap/ng-bootstrap (см. Скриншот ниже)

, чтобы заставить его работать на вашем компьютере, вам нужно npm install --save @ng-bootstrap/ng-bootstrap

Также, вам нужно Boostrap CSS <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> в вас index.html

enter image description here

рабочая демо

...