Angular 4 innerHTML удаляет директиву из элемента

Question

Я пытаюсь установить innerHTML в div, но директива, используемая в тексте, игнорируется. Я не уверен, является ли это недопустимым атрибутом (согласно HTML). Ниже приведен мой код:

<table class="table">
<tbody>
  <tr>
    <td>
      <div [innerHTML]="issue.longText"></div>
    </td>
  </tr>
</tbody>
</table>

значение файла Iss.longText в component.ts:

<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span [issueOpener]='{"recordId": 4, "page":1}'>link</span>)</li></ul>

И когда я проверяю div, я получаю следующее:

<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span>link</span>)</li></ul>

Директива IssueOpener удаляется из промежутка. Так как я могу предотвратить эту директиву? Любая помощь будет принята с благодарностью.

Answer 1

Ajay, вы можете сделать одну вещь, и это, безусловно, сработает в вашем случае. Пожалуйста, обратитесь по следующей ссылке:-

Angular 5 - Как вызвать функцию, когда элемент HTML создается с помощью *ngFor

Вы можете написать логику в ngAfterViewInit(), которая должна отвечать за добавление директивы в HTML, который теперь загружается, чтобы директива могла добавляться динамически. См.:- Как динамически добавить директиву?

Answer 2

Это желаемое поведение, и вот почему: когда вы пишете код Typescript, вы не пишете свое окончательное приложение. Ваш код должен быть скомпилирован в первую очередь.

Для компиляции ваш код проходит через процесс, запускаемый CLI: во время этого процесса компилятор заменяет каждый фрагмент кода Angular действительным кодом JS.

Это означает, например, что (click) событие стало onclick (Это не совсем верно, но это показывает, что я делаю).

Когда вы используете innerHtml, вы пишете окончательный код: он не будет скомпилирован. Это не код Angualr, поэтому он не будет работать так, как вы надеялись.