Question

我有一个名为CarComponent的组件，可以在/car找到。

当我导航到http://localhost:4200/car时，它会转到正确的路线并显示我的CarComponent模板，但我的组件ngOnInit功能未被调用。这是我的组件代码：

// src/app/+car/car.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, HTTP_PROVIDERS } from '@angular/http';

@Component({
  moduleId: module.id,
  selector: 'app-car',
  templateUrl: 'car.component.html',
  styleUrls: ['car.component.css']
})

export class CarComponent implements OnInit {
  cars: any;

  constructor(public http: Http) {
  }

  ngOnInit() {
    console.log('init');
    this.http.get('http://localhost:3000/api/cars.json')
      .subscribe(response => this.cars = response.json());
  }

}

如果有帮助，可以使用以下几个其他文件：

// src/app/dream-cars.component.ts

import { Component } from '@angular/core';
import { CarComponent } from './+car';
import { Routes , ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'dream-cars-app',
  templateUrl: 'dream-cars.component.html',
  styleUrls: ['dream-cars.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  {path: '/car', component: CarComponent}
])
export class DreamCarsAppComponent {
  title = 'Dream Cars';
}

-

<!-- src/app/dream-cars.component.html -->

<h1>{{title}}</h1>

<nav>
  <ul>
    <li><a [routerLink]="['/']">Home</a></li>
    <li><a [routerLink]="['/car']">Cars</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

如何在加载页面时调用ngOnInit（或任何我不在乎的功能）？

顺便说一下，当我点击/car的链接时，它也不会被调用。当我点击链接时，它会转到正确的路线，但不会拨打ngOnInit。只有当我点击链接两次时才能按预期工作。

同样，ngOnInit对我来说不是重要的事情。我只是希望我的组件在页面加载时进行API调用。

Answer 1

原来这是解决方案：Angular2 expressions not rendering

我必须从此

更改我的脚本包含顺序

<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script src="vendor/systemjs/dist/system-polyfills.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>

到这个

<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/systemjs/dist/system-polyfills.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>

我重新启动了我的服务器并且运行正常。

页面加载时未触发ngOnInit

1 个答案: