Не удается настроить ng-bootstrap

Question

Я не могу понять, как использовать ng-boostrap. Я нашел несколько примеров, которые показывают, как использовать директиву . Я получаю различные ошибки.

В моей AppModule у меня есть:

import { NgbAlertModule } from 'ng-bootstrap'; 

...

imports: [ NgbAlertModule, ... ] 

У меня есть компонент, чей HTML содержит:

<alert type="success">Alert works!</alert> 

Я получаю следующее сообщение об ошибке:

Template parse errors: 'alert' is not a known element

Перед тем, как выше, я попытался импортировать Alert или AlertModule (как показано в большинстве примеров), но всегда получал ошибку, в которой говорилось, что такой экспортированный член не существовал. Единственный способ, которым я мог бы получить свой импорт, - это указать NgbAlertModule.

Я очень смущен. Во-первых, я не понимаю, почему кажется, что все примеры хотят поместить импорт в AppModule. Это просто сделать пример простым? Мне больше смысла вкладывать его в компонент, который ему нужен. Это можно сделать? Если да, то как? Это лучшая практика?

Я не понимаю, что ищет импорт. Я понимаю, что он ищет модуль, но где? Большинство примеров, которые я нашел, говорят, чтобы импортировать AlertModule или Alert. В чем разница? Я не мог заставить их работать, но обнаружил, что могу успешно импортировать NgbAlertModule, хотя, похоже, это не содержало.

Любая помощь приветствуется.

Answer 1

Первое, что вам нужно сделать, это использовать правильный селектор для Alert компонента, который не является alert но ngb-alert:

some.component.ts

<ngb-alert type="success">Alert works!</ngb-alert> 

Что касается импорта, Я бы посоветовал пройти через руководство Getting started.

В принципе, линия импорт будет выглядеть следующим образом:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

Затем, в зависимости от того, если вы импортировать его в корневом модуле (скорее всего AppModule) или в другом модуле, декларация импорта будет незначительно отличаться. В корневом модуле должно быть NgbModule.forRoot(), а в других - NgbModule.

Отметьте, что NgbModule является основным модулем, содержащим все остальные (NgbAlertModule, NgbModalModule, ...). Вы можете сделать это с помощью NgbAlertModule, если у вас нет других модулей.