72

新しいコンポーネント を作成しようとしていますResultComponentが、そのngOnInit()メソッドが 2 回呼び出されており、なぜこれが起こっているのかわかりません。コードでは、親 component からResultComponent継承します。@Inputmcq-component

コードは次のとおりです。

親コンポーネント (MCQComponent)

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

@Component({
    selector: 'mcq-component',
    template: `
        <div *ngIf = 'isQuestionView'>
            .....
        </div>
        <result-comp *ngIf = '!isQuestionView' [answers] = 'ansArray'><result-comp>
    `,
    styles: [
        `
            ....
        `
    ],
    providers: [AppService],
    directives: [SelectableDirective, ResultComponent]
})
export class MCQComponent implements OnInit{
      private ansArray:Array<any> = [];
    ....
    constructor(private appService: AppService){}
    ....
}

子コンポーネント (result-comp)

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector:'result-comp',
    template: `
        <h2>Result page:</h2>

    `
})
export class ResultComponent implements OnInit{
    @Input('answers') ans:Array<any>;

    ngOnInit(){
        console.log('Ans array: '+this.ans);
    }
}

実行すると、console.log2回表示されます.1回目は正しい配列を示していますが、2回目はundefined. 私はそれを理解することができませんでした: なぜngOnInit2ResultComponent回呼び出されるのですか?

4

22 に答える 22

47

2 回呼び出される理由

現在、コンポーネントのコンテンツ/ビューの子の変更の検出中にエラーが発生した場合、ngOnInit が 2 回呼び出されます (DynamicChangeDetector で確認できます)。これは、元のエラーを隠すフォローアップ エラーにつながる可能性があります。

この情報は、このgithub issueからのものです

したがって、あなたの間違いは、このコンポーネントに関連するコードの別の場所にあるようです。

于 2016-08-05T11:13:19.250 に答える
22

これは、コンポーネントの html に問題があるために発生していました。ホスト コンポーネントのセレクター タグを閉じるのを忘れていました。だから<search><search>、代わりにこれを持っていた<search></search>- 構文エラーに注意してください。

@dylanの回答に関連して、コンポーネントのhtml構造とその親の構造を確認してください。

于 2016-10-15T05:38:55.243 に答える
18

私の場合の問題は、子コンポーネントをブートストラップする方法でした。@NgModuleデコレータのメタデータ オブジェクトで、bootstap プロパティに「<strong>親コンポーネント」とともに「<strong>子コンポーネント」を渡していました。子コンポーネントを bootstap プロパティに渡すと、子コンポーネントのプロパティがリセットされ、OnInit()が 2 回起動されました。

    @NgModule({
        imports: [ BrowserModule,FormsModule ], // to use two-way data binding ‘FormsModule’
        declarations: [ parentComponent,Child1,Child2], //all components
        //bootstrap: [parentComponent,Child1,Child2] // will lead to errors in binding Inputs in Child components
        bootstrap: [parentComponent] //use parent components only
    })
于 2016-12-15T16:18:08.783 に答える
3

これは、テンプレート エラーがあるたびに発生します。

私の場合、間違ったテンプレート参照を使用していて、それを修正することで問題が解決しました..

于 2017-03-08T05:25:28.677 に答える
3

<router-outlet>の中に名前のない s があったため、これは私に起こりました*ngFor。ループ内の反復ごとにロードされました。

その場合の解決策は、各アウトレットに一意の名前を付けるか、一度に DOM に 1 つだけ存在するようにすることです (おそらく an を使用*ngIf)。

于 2018-08-28T17:24:20.467 に答える
2

これは、次のような複数のルーター コンセントがある場合に発生する可能性があります。

<ng-container *ngIf="condition">
  <div class="something">
    <router-outlet></router-outlet>
  </div>
</ng-container>
<ng-container *ngIf="!condition">
  <div class="something-else">
    <router-outlet></router-outlet>
  </div>
</ng-container>

これを行うと、コンストラクターが 2 回呼び出されることにも注意してください。*ngIfコンストラクターが 2 回呼び出されるという事実は、コンポーネントが 2 回作成されている証拠です。これは、条件が true から false に切り替わる内にコンポーネントがある場合にまさに発生することです。

これをデバッグするための便利な方法は、次のように rnd というクラス変数を作成することです。

rnd = Math.random()

コンストラクターとngOnInit内でconsole.logに記録します。値が変更された場合、2 回目の呼び出しで、それがコンポーネントの新しいインスタンスであり、同じインスタンスが 2 回呼び出されているわけではないことがわかります。これで問題が解決するわけではありませんが、問題を示している可能性があります。

于 2021-04-30T08:53:18.323 に答える
0

これは、アンカー タグに arribute href="#" が含まれていたために発生しました。アンカータグでは使用しないでください。以下に示すように角度コードに従って routerLink を使用し、appComponent.ts で ngInit(0 メソッドを持たないようにしようとすると、これは修正されます。

<a  class="nav-link" [routerLink]="['/login']"> Sign In. </a>
于 2021-07-09T16:03:56.893 に答える