Question

我在angular2应用程序中创建了两个名为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(...)的呼叫包裹到超时时才有效，但这不是解决方案。

Answer 1

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

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

1 个答案: