Как я могу сделать шаблон из строки в Angular 8+? - PullRequest
0 голосов
/ 19 марта 2020

Я хотел бы написать систему блогов, где авторы могут вставлять некоторые пользовательские angular компоненты в свои сообщения, например:

<p><b>Please solve this task!</b></p>
<task question="How much is 2+4?" answer="6"></task>

Таким образом, компонент задачи будет отображать вопрос и тег ввода чтобы проверить ответ пользователя.

Я нашел сообщение в блоге об этом, но оно не поддерживает привязки ввода: https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html

Это было бы нормально для мне нужно просто указать атрибуты c, но мне нужно найти способ передачи данных во встроенный компонент.

Было также хорошее решение для этого, называемое ng-dynamici c, но оно больше не поддерживается, и я не могу заставить его работать: https://www.npmjs.com/package/ng-dynamic

1 Ответ

0 голосов
/ 19 марта 2020

Я следовал инструкциям на этой странице: https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html Проблема заключалась в том, что я не мог прочитать атрибуты с помощью свойства @Input. Вместо этого я использовал elementRef для чтения входных данных:

import {Component, ElementRef, Input, OnInit} from '@angular/core';

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
})
export class TestComponent implements OnInit {
  constructor( private elementRef: ElementRef) {
    let el: HTMLElement = this.elementRef.nativeElement;
    console.log(el.getAttribute("question"));
    this.question = el.getAttribute("question");
    this.answer = el.getAttribute("answer");
  }

  @Input() question;
  @Input() answer;
  isHidden = false;

  ngOnInit() {
  }
}

Я до сих пор не знаю, как мы можем использовать проекцию контента.

...