Question

我正在开发一个Angular 2应用程序，该应用程序将通过其他网站上的iframe提供。测试时我注意到，当我加载应用程序时，App Component ngOnInit()函数被调用两次。

我发现这很奇怪，因为当我在“自己”上测试应用程序时，即不是iframe，App Component ngOnInit()只被调用一次。

根据this answer，这可能发生在子组件中的错误。但在我的情况下，我在正常运行应用程序时没有遇到问题。

示例代码：

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

@Component({
    selector: 'my-app',
    template: `<h1>My App!</h1>`
})
export class AppComponent implements OnInit {
    constructor() {
        console.log('App Component constructor()');
    }

    ngOnInit() {
        console.log('App Component ngOnInit()');
    }
}

iframe测试：

<!DOCTYPE html>
<html>
    <body>
        <h1>My Test Page</h1>
        <!-- iframe accessing my-app component -->
        <iframe id="test-iframe" src="/#/" width="100%" height="1300px"></iframe>
   </body>
</html>

我仅使用AppComponent测试了该应用程序，以确保没有子组件导致任何问题。

控制台输出：

Answer 1

根据我的理解，问题很可能是，因为在<p style="margin-bottom: 20px;"> <input name="mobile_number" onKeyUp="check_mobile_number_length(this.value)" type="number" class="feedback-input" id="mobile_number" onchange="updateInput_mobile_number(this.value)"> <span id="mySpan_mobile_number" style=" float: left; margin-left: 12px; ^margin-left: 0px; font-size: 12px; color: red;"></span> </p> <script> function check_mobile_number_length(mobile_number_value){ var mobile_number_value = mobile_number_value.replace(/[^0-9,.]+/g, ""); document.getElementById("mobile_number").value = mobile_number_value; var mobile_number_value = document.getElementById("mobile_number").value; if(mobile_number_value.length==10) { document.getElementById("mobile_number").style.border = "1px solid rgba(72,72,72,0.4)"; document.getElementById("mySpan_mobile_number").innerHTML = ""; return false; } else { document.getElementById("mobile_number").style.border = "1px solid red"; document.getElementById("mySpan_mobile_number").innerHTML = "please enter mobile number for 10 decimal"; } } </script>完成加载后调用ngOnInit()方法，iframe元素的加载就在{{1}之后开始生命周期结束导致iframe @Component值为null。

这意味着，因为在调用ngOnInit()之后iframe正在加载自身，所以来自组件的任何src值都是异常的，因此ngOnInit()。

注意： iframe就像注入DOM的外部浏览器一样，因此它有自己的加载时间。

因此我建议将src用于此类事情，因为在实例化类时它总是被调用。

Angular 2应用程序组件ngOnInit在使用iframe时调用了两次

1 个答案: