如何多次从 AngularJS 加载 Angular2 组件？答案

【问题标题】：How to load an Angular2 component from AngularJS more than one time?如何多次从 AngularJS 加载 Angular2 组件？
【发布时间】：2018-01-16 05:21:26
【问题描述】：

我正在开发一个同时具有 AngularJS 和 Angular 的应用程序。现在，我正在使用以下行从 html 页面调用 Angular 组件：

System.import('app')

在 app\app.module.ts 文件中，我指定了要引导的特定父组件。这个父组件又调用一个子组件。我在父子组件的构造函数中放了一些 console.log 语句，我第一次看到一切正常。

但是，当我离开并再次返回 html 页面时，我注意到父组件和子组件没有被初始化。我发现的唯一解决方法是刷新整个页面，这并不理想。我试图在用户离开后立即卸载 Angular 组件，但我找不到任何合适的 SystemJS 方法。

我知道 Angular 组件只会被初始化一次，这可能就是发生这种情况的原因，但有没有办法解决这个问题？

谢谢

【问题讨论】：

标签： angularjs angular systemjs

【解决方案1】：

我设法找到了我的问题的答案。诀窍是在导入和删除模块时使用完全限定的 URL，如下所示：

System.import('protocol//domainname:portnumber/modulename/filename')

System.delete('protocol//domainname:portnumber/modulename/filename')

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

也许 AngularJS 引导程序会干扰 angular2。

https://angular.io/guide/upgrade#bootstrapping-hybrid-applications 解释了如何引导混合应用程序。

您也可以尝试将 Angular 2 迁移到 Angular 5。

【讨论】：

【解决方案3】：

嗯，这可能是一个很长的镜头。但是您是否尝试过让您的组件实现 OnChanges 和 OnInit。你可以在 ngOnChanges 中调用 ngOnInit 来重新初始化组件。

//这是我对类似问题的修复在组件中，说：

@Component({
    selector: 'app-myapp',
    templateUrl: './myapp.component.html',
    styleUrls: ['./myapp.component.scss']
})
export class MyappComponent implements OnInit, OnChanges {
    ngOnChanges() {
        ngOnInit(){}; //reinitialize when onchanges is called again
    }
}

您还应该考虑https://angular.io/api/core/OnChanges#usage-notes。

希望对你有帮助

【讨论】：