Как использовать SyntaxHighlighter для динамически загружаемых блоков кода с Angular 6? - PullRequest
Новая
       50

Как использовать SyntaxHighlighter для динамически загружаемых блоков кода с Angular 6?

0 голосов
/ 21 октября 2018

Я пытаюсь добавить SyntaxHighlighter в мой угловой проект блога.Мои статьи имеют отформатированные фрагменты кода <pre> и загружаются из базы данных.HTML-код этой статьи затем отображается в шаблоне ArticleComponent.Сам этот ArticleComponent загружается при запуске определенного маршрута. Но когда я просматриваю этот маршрут и статья загружается, отформатированные коды <pre> вообще не подсвечиваются .Однако, если я обновлю страницу, подсветка будет работать хорошо.Не уверен, где я иду не так.

index.html 

<head>
    <meta charset="utf-8">
    <title>My Blog</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <link rel="stylesheet" href="./assets/css/foundation.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <app-root></app-root>

    <script type="text/javascript" src="./assets/js/jquery.js"></script>
    <script type="text/javascript" src="./assets/js/what-input.js"></script>
    <script type="text/javascript" src="./assets/js/foundation.js"></script>
    <script>
        $(document).foundation();
    </script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" ></script>
    <script type="text/javascript">
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all()
   </script>
</body>

article.component.html 

<div class="cell">
    <span [innerHTML]="article"></span>
</div>

article.component.ts 

export class ArticleComponent implements OnInit {

    public article = '';
    public title = '';

    constructor(private _route: ActivatedRoute, private _articleService: ArticleService) {
    }

    ngOnInit() {
        const articleId: string = this._route.snapshot.paramMap.get('id');

        const allArticles = this._articleService.getArticles();
        const selectedArticleMetaData = allArticles.find(x => x.id === parseInt(articleId, 10));
        this.title = selectedArticleMetaData.title;

        this._articleService
            .getArticleHtml(selectedArticleMetaData.id)
            .subscribe((article: string) => {
                this.article = article;
            });
    }

}

Я проверил элементы HTML DOM и могу убедиться, что статья, загружаемая без обновления, имеет все свои блоки <pre> каксырой код.Но когда SyntaxHighlighter действительно работает в случае обновления, все эти <pre> теги преобразуются в элементы div с соответствующими классами стилей.

Похоже, когда статьи загружаются через связывание, SyntaxHighlighter не может обработать <pre> тегов.Есть идеи как это исправить?Также есть идеи, почему это работает, когда я обновляю эту страницу?В любом случае статья загружается через переплет.

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Решено.Ответьте здесь, поскольку это может быть полезно для кого-то еще. Метод

SyntaxHighlighter.all() регистрирует метод Highlight для события windows.load.Следовательно, этот метод запускается только при загрузке страницы и никогда позже.Это решает загадку того, почему подсветка работала во время обновления страницы, а не когда угловая маршрутизация запускается.

Исправление - это запуск события window.load после загрузки статьи в DOM.Есть лучшие способы сделать это, но вот самый прямой способ сделать это.Обновите article.component.ts , чтобы включить код для запуска события window.load. 

this._articleService
    .getArticleHtml(selectedArticleMetaData.id)
    .subscribe((article: string) => {
        this.article = article;
        this.loading = false;

        // trigger window.load event after 500 ms of binding the article property
        setTimeout(() => {
            window.dispatchEvent(new Event('load'));
        }, 500);
    });
0 голосов
/ 22 октября 2018

Метод SyntaxHighlighter.all(), который выделяет все html с тегом <pre>, вызывается только один раз, т.е. когда страница загружается, потому что вы включили ее в тег сценария index.html.Когда вызывается этот метод, он выделяет все доступные <pre> на странице.

Когда вы идете по маршруту, должна быть вызвана функция SyntaxHighlighter.all(), которая выделит новые сгенерированные теги или текст внутриэтот тег.

Когда вы обновляете страницу, теги <pre> доступны на html-странице, когда вызывается SyntaxHighlighter.all(), что является причиной, она выделяется правильно.

Так и для статейкоторые загружаются через связывание, вызовите SyntaxHighlighter.all() в логике один раз, чтобы выделить ваши <pre> теги.

Вам нужно выбрать правильное событие, где оно должно вызываться в вашем компоненте, а также вам нужно определитьпеременная вверху вашего компонента ниже ваших операторов импорта, так что tslint должен позволить вам использовать эту переменную в вашем компоненте, т.е. declare var SyntaxHighlighter

...