javascript - 第一次加载组件时 Angular 4 ngOnInit 不工作

Question

我在 Angular 4 中有一个组件和一个用于更改路由的模板这个组件被调用但不加载任何没有服务器调用的东西。如果我将 ngOnInit() 方法内容放入构造函数中，它就可以正常工作。似乎没有调用 ngOnInit。自从过去 2 天以来，任何人都可以帮助我处理这个问题。

这是我的路由配置。

const testRouting: ModuleWithProviders = RouterModule.forChild([
        { path:'createtest/:id', component:TestComponent, resolve: { test:TestResolver }},
        { path:'createtest', component:TestComponent, resolve: { test:TestResolver }},
        { path:'testlist', component:TestListComponent }
]);


import {Component,OnInit} from '@angular/core'
import {TestService,Test} from '../shared'
import 'rxjs/add/operator/map';
@Component({
    selector:'test-list',
    templateUrl:'./testlist.component.html'
})
export class TestListComponent implements OnInit{
    testList:Array<Test>;
    constructor(private testService:TestService){}
    ngOnInit = ()=>{
        this.testService.getTest()
        .subscribe(
            data=>this.testList = <Array<Test>>data,
            error=>alert(error)
        );
        console.log("ngOnInit");
    }
}

这是我配置路由的模板

<nav class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" routerLink="/">SLearn</a>
    <a class="xyz" routerLink="/testlist">Test List</a>
  </div>
</nav>

Answer 1

您必须重载 ngOnInit 函数。这不适用于箭头函数。

你必须做的:

ngOnInit() {
    this.testService.getTest()
    .subscribe(
        data=>this.testList = <Array<Test>>data,
        error=>alert(error)
    );
    console.log("ngOnInit");
}

希望我能帮上忙。

---

更新(额外信息感谢 maximus):

普通函数声明在原型(prototype)上创建 ngOnInit 属性，而箭头函数在实例上创建它。

Angular 本身 looks only for the hooks on the prototype.这就是为什么您的原始方法无法按预期工作的原因。