внутреннее HTML в angular 6 приложении

Question

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

 <div [innerHTML]="message.body"></div>

, это работает очень хорошо, но когда мы отправляем, мы видим от трех до четырех сообщений с одинаковым телом. и затем, наконец, оно становится одним сообщением через несколько секунд.

Кто-нибудь сталкивался с такой же проблемой?

// EDIT

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

 define(function (require, exports, module) {
    'use strict';

    var base = require('base');
    var utils = base.utils;

    configCompile.$inject = ['$compileProvider'];
    module.exports = configCompile;

    function configCompile($compileProvider) {

        $compileProvider.directive('myCompile', myCompile);

        function myCompile($compile) {
            // directive factory creates a link function
            return {
                scope: {
                    compile: "=",
                    scope: "=?",
                },
                link: link,
            }

            function link(scope, element, attrs) {
                var scope_child = scope.$new();

                scope.$watch('compile', function () {
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

                scope.$watch('scope', function () {
                        scope.scope = scope.scope || {};
                        scope_child = scope.$new();
                        for (var idx in scope.scope) {
                            scope_child[idx] = scope.scope[idx];
                        }
                        scope_child.$this = scope.scope;
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

            };
        };
    }

})

и HTML У меня есть следующее:

<div>
                        <my-compile compile="message.body" scope="{}" tosca-id="message-{{ $index }}-body-content"></my-compile>
                    </div>

Answer 1

Поскольку вы не предоставили более подробную информацию по этому вопросу, поэтому на основании предоставленной информации я предложу одно решение.

Если вы можете управлять одним флагом для этого тега <div *ngIf="messageSent" [innerHTML]="message.body"></div>, который был ложным перед отправкой сообщения после отправки, он станет истинным, поэтому ваше сообщение выполняется только один раз.

и чтобы этот флаг снова стал ложным, измените его, в то время как функция messageSend() будет выполняться, если она принадлежит другому компоненту, затем создайте ее как

BehaviourSubject ()

и сохраните по всему приложению