Сегодня я перешел к проектам визуализации данных для скоростного забега Chingu FCC Speedrun Challenge, и первым в списке был Markdown Previewer. По сути, единственное реальное требование для этого — создать приложение, в котором вы вводите уценку в одном поле, а приложение отображает уценку в другом. В инструкциях указано, что вам на самом деле не обязательно писать парсер самостоятельно, вы можете использовать отмеченный npm-пакет.

Сначала у меня были мысли: «Вау, это будет тяжело». Мои первоначальные мысли были неправильными. В Angular 2 встроена концепция канала — и я всегда использовал каналы в Linux/Unix. По сути, конвейер просто принимает некоторый ввод, преобразует его в соответствии с некоторыми правилами, а затем возвращает преобразованные данные в качестве вывода. Предварительный просмотр уценки с трубками = легко и просто.

Во-первых, я создал приложение с помощью Angular CLI и настроил Материал, точно так же, как я делал это для внешних проектов. Затем я установил npm помеченный для проекта и создал канал для «пометки» любого ввода, который был передан в него. Конечно, помеченный прост в использовании и просто работает без особых усилий. Вот моя трубка:

По сути, это просто шаблон, который вы получите, запустив ng generate pipe mark с тремя добавленными строками, строками 2, 10 и 11, все из которых полностью объяснены в отмеченной документации.

Как только моя трубка была готова к запуску, мне оставалось только настроить текстовую область для ввода пользователем и div для отображения «отмеченной» версии. Опять же, Angular 2 приходит на помощь — привязка данных позволяет вам обрабатывать этот тип использования, просто настраивая свойства элементов. Я устанавливаю ngModel текстовой области для захвата данных по мере того, как пользователь их вводит, и устанавливаю источник вывода div как этот ввод, переданный через отмеченный.

Суть этого заключается в установке [(ngModel)]="input" в текстовой области ввода и innerHtml={{input|mark}} в выходном div. По сути, это делает так, что «входная» переменная компонента обновляется всякий раз, когда пользователь вводит текст в текстовую область, плюс, всякий раз, когда эта входная переменная изменяется, она передается через канал метки, а innerHtml выходного div обновляется с новым значением .

Я знаю, что мог бы сделать гораздо больше с этим проектом. Например, я мог бы настроить службу и некоторое количество кнопок (для полужирного шрифта, курсива, заголовков и т.п.) и действительно сделать все «хорошо», как настоящий текстовый редактор. Я могу сделать это когда-нибудь, но сегодня я хочу перейти к следующему проекту, и для меня этого было достаточно, чтобы завершить варианты использования для этого проекта.

Примечания:

Мой прогресс в Speedrun на данный момент: