我正在使用 JavaScript (ES5) 编写 Angular 2 应用程序，但框架未调用我的生命周期 Hook 。
附件是:带有 ngOnInit 的示例组件、index.html、应用程序组件、应用程序模块、main.js。 “all.min.js”是我所有 Angular 应用程序 js 文件的文件，由 uglifyJS 生成。
预期结果是调用组件的 ngOnInit 并打印控制台消息“ngOnInit”。 Chrome 控制台中没有打印任何消息。
index.html(为简洁起见缩短):
<!DOCTYPE html>
<html>
<body>
<app>Loading...</app>
<script src="/app/assets/javascript/angular/Rx.js"></script>
<script src="/app/assets/javascript/angular/core.umd.js"></script>
<script src="/app/assets/javascript/angular/common.umd.js"></script>
<script src="/app/assets/javascript/angular/compiler.umd.js"></script>
<script src="/app/assets/javascript/angular/platform-browser.umd.js"></script>
<script src="/app/assets/javascript/angular/platform-browser-dynamic.umd.js"></script>
<script src="/app/assets/javascript/angular/forms.umd.js"></script>
<script src="/app/assets/javascript/angular/shim.min.js"></script>
<script src="/app/assets/javascript/angular/Reflect.js"></script>
<script src="/app/assets/javascript/angular/zone.js"></script>
<script src="/app/assets/javascript/angular/system.js"></script>
<script src='/app/ng_app/all.min.js'></script>
</body>
</html>
app.component.js:
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'app',
template: '<brief></brief>'
})
.Class({
constructor: function() {
}
});
})(window.app || (window.app = {}));
app.module.js:
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
declarations: [app.AppComponent,
app.BriefComponent
],
bootstrap: [app.AppComponent]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
示例组件(简短组件):
(function(app) {
app.BriefComponent =
ng.core.Component({
selector: 'brief',
templateUrl: 'ng_app/brief/brief.component.html'
]
})
.Class({
constructor: function() {
},
ngOnInit: function() {
console.log('ngOnInit brief');
}
});
})(window.app || (window.app = {}));
main.js:
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
最佳答案
事实证明，在将生命周期 Hook 添加到代码中后，我只是忽略了重新生成 all.min.js 文件。
关于javascript - Angular 2 生命周期钩子(Hook)未调用(ES5 javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41143456/