渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？答案

【问题标题】：How to run TypeScript code in Angular2 after all components have been rendered?渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？
【发布时间】：2017-03-16 11:52:38
【问题描述】：

我在我的 angular2 应用程序中创建了 2 个简单的组件，分别称为 IndexPageComponent 和 DetailPageComponent：

IndexPageComponent

import { Component } from 'angular2/core';

@Component({
  selector: 'indexpage',
  template: `
      <div data-page="index" class="page">
      </div>
  `
})

export default class IndexPageComponent {

  constructor() {
  }
}

DetailPageComponent

import { Component } from 'angular2/core';

@Component({
  selector: 'detailpage',
  template: `
      <div data-page="detail" class="page cached">
      </div>
  `
})

export default class DetailPageComponent {

  constructor() {
  }
}

这两个组件都用在这个组件里：

MainViewComponent

import { Component } from 'angular2/core';
import IndexPageComponent from './IndexPageComponent';
import DetailPageComponent from './DetailPageComponent';

@Component({
  selector: 'main-view',
  template: `
    <div class="pages">
        <indexpage></indexpage>
        <detailpage></detailpage>
    </div>
  `,
  directives: [IndexPageComponent, DetailPageComponent]
})

export default class MainViewComponent {

  constructor() {
  }
}

我的 HTML 如下所示：

  <body>
    <div class="views">
      <main-view class="view view-main"></main-view>
    </div>
  </body>

我还使用了另一个 UI 框架（称为 Framework7），它需要在所有组件以及 DOM 都准备好之后进行初始化。

为了初始化，我需要运行以下代码：

var fw7App = new Framework7();
var fw7MainView = fw7App.addView('.view-main', {
    domCache: true //enable inline pages
});

不幸的是，我需要等待，直到所有组件和 DOM 都准备好。在 Angular2 + TypeScript 项目中我应该把这段代码放在哪里？

我尝试将其放入自己的 .ts 文件并运行它：

import 'framework7'
import { bootstrap } from 'angular2/platform/browser';
import MainViewComponent from './MainViewComponent';

var fw7App = new Framework7();
var fw7MainView = fw7App.addView('.view-main', {
    domCache: true //enable inline pages
});

bootstrap(MainViewComponent);

但这不起作用，因为它被提前调用（Angular2 组件和 DOM 尚未渲染和准备好）。

仅当我将对 fw7App.addView(...) 的调用包装到超时时才有效，但这不是解决方案。

【问题讨论】：

标签： angular typescript

【解决方案1】：

您需要将该代码放入父组件的方法 ngAfterViewChecked() 中。在此处阅读有关组件生命周期挂钩的信息：https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview

【讨论】：