渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？
Posted
技术标签:
【中文标题】渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？【英文标题】：How to run TypeScript code in Angular2 after all components have been rendered? 【发布时间】：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(...) 的调用包装到超时时才有效，但这不是解决方案。
【问题讨论】：
【参考方案1】：您需要将该代码放入父组件的方法 ngAfterViewChecked() 中。在此处阅读有关组件生命周期挂钩的信息：https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview
【讨论】：
以上是关于渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？的主要内容，如果未能解决你的问题，请参考以下文章