angular - Angular 6 应用程序中的 innerHTML

问题描述

我们在 Angular 6 中开发了消息传递应用程序，现在当用户发送消息时，我们使用

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

这很好用，但是当我们发送时，我们会看到三到四条具有相同正文的消息，然后在几秒钟后最终变成一条消息。

有人遇到过同样的问题吗？

//编辑

这是已经在 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>

标签： angular

由于您没有提供有关该问题的更多详细信息，因此根据给定的信息，我将建议一种解决方案。

在您发送消息之前，您可以管理该<div *ngIf="messageSent" [innerHTML]="message.body"></div>标签的一个标志，该标志在您发送消息之前为假，它将变为真，因此您的消息只执行一次。

并且该标志再次变为假，messageSend()如果它来自不同的组件，则函数将执行，然后将其创建为

行为主体（）

并在整个应用程序中维护

angular - Angular 6 应用程序中的 innerHTML

问题描述

解决方案

推荐阅读