Интегрировать Reveal. js в Angular - PullRequest
0 голосов
/ 06 мая 2020

У меня возникли проблемы при попытке интегрировать раскрытие. js в Angular 9.x. Не знаю, как загружать библиотеки, чтобы они работали нормально при загрузке представления любого заданного компонента.

Прежде всего, я попытался последовать примеру их веб-страницы. Там они загружают скрипты, стили и так далее прямо в index. html file:

<html>
    <head>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/black.css">

        <!-- Theme used for syntax highlighting of code -->
        <link rel="stylesheet" href="lib/css/monokai.css">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>

        <script src="js/reveal.js"></script>

        <script>
            // More info about config & dependencies:
            // - https://github.com/hakimel/reveal.js#configuration
            // - https://github.com/hakimel/reveal.js#dependencies
            Reveal.initialize({
                hash: true,
                dependencies: [
                    { src: 'plugin/markdown/marked.js' },
                    { src: 'plugin/markdown/markdown.js' },
                    { src: 'plugin/highlight/highlight.js' },
                    { src: 'plugin/notes/notes.js', async: true }
                ]
            });
        </script>
    </body>
</html>

Все сработало нормально, я смог загрузить презентацию, хотя у меня возникли некоторые проблемы со стилем. Все идет нормально. Однако очевидно, что как часть моего приложения я не хочу показывать презентацию раскрытие. js в index. html, а вместо этого под любым компонентом по моему выбору. Вот и все:

Следующим шагом было включение библиотек в папку ресурсов Angular: css, плагин и темы. Добавьте код html к компоненту html и попробуйте увидеть результаты. Здесь у меня были две основные проблемы: либо компилятор Angular не нашел библиотеки, а точнее c, библиотеки в массиве dependencies , либо у меня возникли некоторые проблемы с синхронизацией порядок, в котором эти библиотеки загружаются. Некоторые плагины или даже основная библиотека js запускались некорректно. Кроме того, здесь более остро стоят проблемы стилизации. Это просто катастрофа.

Я прочитал документацию в поисках примеров любых интеграций, но безуспешно. Возможно, мне не хватает чего-то простого о том, как настроить среду и правильный способ загрузки файлов html, css и плагинов.

Есть идеи?

1 Ответ

0 голосов
/ 20 июля 2020

Вы можете поместить сценарии инициализации в компонент Angular, а не внутри индекса. html.

Вот мое решение , которое я опубликовал по другому вопросу. Обычно вы помещаете сценарии инициализации в ловушку жизненного цикла ngAfterViewInit с необходимыми вам подключаемыми модулями.

Я также нахожу аналогичный Vue. js пример , надеюсь, это помогает.

Насчет стилей, загружаю их внутрь angular.json, раздел: projects.[yourappname].architect.build.styles

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...