Question

我在<my-app>（角度2）的元素中插入元素时遇到问题。我首先需要获取元素<div class="render"></div>我使用<script>中的jQuery（查看代码html）然后需要在<div class="render"></div>中写入任何信息（例如<h1> Hello </h1> （看看HTML代码））。当应用程序运行时，代码必须写入<div class="render"></div>。但是，这不会发生，因为在开始时<div class="render"></div>不存在。如果设置setTimeOut然后它正在工作（因为<div class="render"></div>及时出现在页面上）。请问谁可以决定这个问题？附： JQuery和Angular 2在一个应用程序中这是不正确我知道它但我需要决定问题。

HTML代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
  </head>
<body>
<my-app>loading...</my-app>
<script> //there's try to get element '.render'
    $(document).ready(function(){
         $("#render").html('<h1> Hello </h1>');
    });
</script>
</body>
</html>

Angular 2 app.component.html

<div class="content">
    <div class="container">
        <side-bar-left></side-bar-left>
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12paddingMiddle"> 
                <div id="divSidebarRight">
                    <div class="render">
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

请勿尝试从.html文件中访问该元素。使用AfterViewInit生命周期钩子在组件内部执行此操作。

Import {AfterViewInit} from '@angular/core'

将此添加到您的班级声明

Class implements AfterViewInit

然后在此函数中使用你的jquery

    ngAfterViewInit (){
// jquery here 
}

在元素Angular 2中插入脚本中的任何元素

1 个答案: