Я новичок в Angular и Bootstrap, поэтому заранее прошу прощения, если этот вопрос несколько простой и немного широкий.
В целях тестирования / обучения я пытаюсь перенести в свой новый проект пример "Mixed menu items and form 'Toggle Dropdown'"
Stackblitz из https://ng -bootstrap.github.io / # / components / dropdown / examples , и хотя я могу заставить HTML отображаться, я не могу заставить выпадающую кнопку переключаться.
Я пробовал два подхода:
Я создал проект, а затем скопировал в соответствующие файлы src / app из коллекции Stackblitz в папку проекта src / app (то есть app.component.html
, app.component.ts
, app.module.ts
, dropdown-form.html
, dropdown-form.ts
).При таком подходе HTML отображался, но выпадающий список не переключался.
В качестве второй попытки я попытался скопировать всю коллекцию 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 и заставить работать выпадающий переключатель.,,