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

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

angular iframe

Angular 2应用程序组件ngOnInit在使用iframe时调用了两次,angular,iframe,Angular,Iframe,我正在开发Angular 2应用程序，该应用程序将通过其他网站上的iframe交付。在测试过程中，我注意到当我加载应用程序时，App组件ngOnInit（）函数被调用了两次我觉得这很奇怪，因为当我“自己”测试应用程序时，即不是只调用一次iframe应用程序组件ngOnInit（）根据这一点，由于子组件中的错误可能会发生。但在我的例子中，我在“正常”运行应用程序时没有问题示例代码： import { Component, OnInit } from '@angular/core'; @Co

我正在开发Angular 2应用程序，该应用程序将通过其他网站上的iframe交付。在测试过程中，我注意到当我加载应用程序时，App组件

ngOnInit（）

函数被调用了两次

我觉得这很奇怪，因为当我“自己”测试应用程序时，即不是只调用一次iframe应用程序组件

ngOnInit（）

根据这一点，由于子组件中的错误可能会发生。但在我的例子中，我在“正常”运行应用程序时没有问题

示例代码：

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()');
    }
}

<!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>

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“我的应用程序”，
模板：`我的应用程序`
})
导出类AppComponent实现OnInit{
构造函数（）{
log（'App Component constructor（）'）；
}
恩戈尼尼特（）{
log（'App Component ngOnInit（）'）；
}
}

Iframe测试：

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()');
    }
}

<!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

测试了应用程序，以确保没有子组件导致任何问题

控制台输出：

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()');
    }
}

<!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>

根据我的理解，最有可能的问题是，由于

@Component

完成加载后调用了

ngOnInit（）

方法，因此iframe元素的加载在

ngOnInit（）

生命周期结束后立即开始，导致iframe

src

值为空

这意味着，由于iframe在调用

ngOnInit（）

后正在加载其自身，因此来自组件的任何

src

值对它来说都是外来的，因此

null

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

因此，我建议对这类事情使用

构造函数（）{}

，因为它总是在实例化类时被调用

我认为这种行为是很正常的，因为iframe行为类似于浏览器和重新创建文档，因此您的组件再次初始化。好的，但是如果您有一个页面，其中一个iframe正在显示Angular应用程序，就像我上面显示的iframe测试一样，

AppComponent

是否应该触发一次？如果我在两个地方显示

my app

组件，我会理解。你是否像这样用abs路径测试src？在测试中，我有角度应用程序，测试页面在同一个站点上，只是不同的页面。因此，使用绝对路径访问iframe与否没有关系。我只是为了以防万一而尝试了它，但仍然导致调用了两次

ngOnInit（）

。我在apache上测试了它，并将其发布到子域ngOnInit上，构造函数只运行了一次。我认为iis可能有问题。来源：|=>解压=>npm安装=>npm运行构建：prod