Question

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

System.import('app')

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

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

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

由于

Answer 1

也许AngularJS bootstrap会干扰angular2。

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

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

Answer 2

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

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

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

希望这有助于某人。

Answer 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。

希望有帮助

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

3 个答案: