我有点困惑为什么ngAfterContentInit在这种情况下执行两次.我已经创建了我们的应用程序的精简版本来重现该错误.简而言之,我使用a *contentItem来标记组件,然后由standard-layout组件拾取以进行渲染.只要我遵循这个模式,demo的ngAfterContentInit执行两次.
我将演示应用程序放在github上,这将重现错误:https: //github.com/jVaaS/stackoverflow/tree/master/ngaftercontentinit
否则这里是重要的一点:
越野车,app.dart:
@Component(
selector: "buggy-app",
template: """
<standard-layout>
<demo *contentItem></demo>
</standard-layout>
""",
directives: const [
ContentItemDirective,
StandardLayout,
Demo
]
)
class BuggyApp implements AfterContentInit {
@override
ngAfterContentInit() {
print(">>> ngAfterContentInit: BuggyApp");
}
}
标准layout.dart:
////////////////////////////////////////////////////////////////////////////////
///
/// Standard Layout Component
/// <standard-layout></standard-layout>
///
@Component(
selector: "standard-layout",
template: """
<div *ngFor="let item of contentItems ?? []">
<template [ngTemplateOutlet]="item.template"></template>
</div>
""",
directives: const [ROUTER_DIRECTIVES, ContentItem])
class StandardLayout implements AfterContentInit …由于某种原因，我的函数被调用两次，但我似乎不明白为什么。
我在这里看到这个问题
哪个引用了这个github问题
https://github.com/angular/angular/issues/6782
但这似乎表明我正在多个地方导入该文件，但我认为情况并非如此。
据我所知，我正在利用 Ionic 3 的延迟加载功能。
这是一个精简的 github 存储库的链接，您可以在本地运行来查看问题（很抱歉，我无法找出在 plunker 或 codepen 中运行它的最佳方法）
https://github.com/Jordan4jc/ionic-init-example
这个概念是主应用程序首先从商店加载一个令牌，然后验证它，如果它仍然是有效的路由，EventsPage但如果不是，它将路由到LoginPage
在此示例中，我伪造它并假装令牌有效并路由到EventsPage，正如您将在ngOnInit函数中看到的那样（如果我将其移动到构造函数theconsole.log 中，则事件会被调用两次。这将击中我的服务器获取最新数据，所以我真的不想两次调用我的 API。
编辑：这是内容app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {Storage} from '@ionic/storage';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, storage: Storage) …Per Angular ( https://angular.io/api/core/OnInit表示ngOnInit 在第一次检查指令的数据绑定属性之后被调用，并且在它的任何孩子被检查之前被调用。它被调用仅在指令实例化时一次。），
所以 ngOnInit 应该被调用一次，但如plunker所示（这是来自https://angular.io/tutorial/toh-pt5的副本），我只修改了 app/heroes/heroes.component.ts和 app/dashboard /dashboard.component.ts有 console.log
并且打开F12（开发者工具）时，控制台会在路由改变时重复显示日志。
我看看 为什么 ngOnInit 调用了两次？, Constructor 和 ngOnInit 的区别, Angular 2 App Component ngOnInit 在使用 iframe 时调用两次, ngOnInit 每次更改路由时调用
但不明白为什么每次都调用 ngOnInit。
console.log("ngOnInit in All Heroes");
console.log("ngOnInit InDashBoard");
我正在开发一个递归查询构建器形式，它与 Angular 7中的反应形式类似。表示用户可以通过点击 继续添加并行规则Add rule，也可以通过点击 添加分组Add group。我创建了两个组件，QueryDesignerComponent并且QueryComponent. QueryDesignerComponent保存外部容器，带有AND和OR条件，并QueryComponent保存行输入，即LHS,operator和RHS。
Add rule再推送一个条目即可增长规则。我用 重复这一点。QueryComponentQueryDesignerComponent*ngForAdd group我正在调用QueryDesignerComponentinside QueryComponent，这使得它递归。我用 重复这一点*ngFor。我已经完成了实现，并且它在有角度环境的角度应用程序中运行良好。
现在，我正在尝试将此流程移植到Angular elements中，以使其可重用，无论环境如何。
这就是我将第一行 [ QueryComponent] 放在里面的方式QueryDesignerComponent，
<div class="qd--criteria">
<div class="row qd--body qd--clear-margin-lr">
<div class="col-md-12 qd--condition-container">
<query [data]="data" [operators]="operators" [(queryForm)]="queryForm"></query>
</div>
</div>
</div>这样我就可以管理内部的并行查询和组 …