Angular2：在組件視圖上意外的指令值'undefined'

Question

在我的Angular2應用程序中，我需要顯示編輯者可以創建的問題列表。在每個問題下面可以有0-n個答案（選項 - 如「是」，「否」，「5」等）。所以我需要從我的QuestionComponent加載AnswerComponent。

但是，每個答案可以有0-1個問題（後續問題）。這意味着我也必須將QuestionComponent從AnswerComponent中加載出來。

這裏是一個plunker：http://plnkr.co/edit/1itBVtDu8TD8Etxo4JZh

的QuestionComponent（減少）：

@Component({ 
    selector: 'copyright-question', 
    template: ` 
       <div class="col-md-8"> 
        <strong>{{ question?.content }}</strong> 
        <div class="row-actions"> 
         <span *ngIf="!question?.isAnswer" class="addAnswer"><button (click)="onAddAnswer()">Add Answer</button></span> 
        </div> 
       </div>, 

       <li *ngFor="let answer of question.answers"> 
        <copyright-answer [answer]="answer"></copyright-answer> 
       </li> 
    `, 
    directives: [AnswerComponent] 
}) 

的AnswerComponent（減少）：

@Component({ 
    selector: 'copyright-answer', 
    template: ` 
      <ul class="col-md-12"> 
       <li><strong>{{ answer.answerTxt }}</strong></li> 
       <li> 
        <div class="row-actions"> 
         <span> 
          <span><button (click)="onQuestionSave()">Add follow-up question</button></span> 
         </span> 
        </div> 
       </li> 

       <!-- Follow Up Question --> 
       <li> 
        <copyright-question [question]="copyrightQuestion"></copyright-question> 
       </li> 
      </ul> 
    `, 
    directives: [QuestionComponent] 
}) 

研究這個了3天之後，我知道，這是循環依賴。無論如何，我不知道如何解決這個問題。我需要提供任意長度的問題和答案。我試圖向前引用，但我還是有以下錯誤信息：

例外：觀「未定義」意外的指導價值成分「AnswerComponent」

FYI：應用程序是一個後端爲離子應用。如果用戶必須回答問題並根據他選擇的內容，將會有後續問題或結果（技術上也是問題）。

如果這個問題重複，隨時給我看這個問題的答案！但是我找不到一個解決方案，它可以處理那些嵌套的組件。

非常感謝！

Answer 1

/** 
* Created by Brudus on 11/06/16. 
*/ 
import {Component, OnInit, Input, forwardRef} from "@angular/core"; 
import {Question} from "./question"; 
import {Answer} from "./answer"; 
import {QuestionComponent} from "./question.component"; 

@Component({ 
    selector: 'copyright-answer', 
    template: ` 
      <ul *ngIf="answer" class="col-md-12"> 
       <li><strong>{{ answer.answerTxt }}</strong></li> 
       <li> 
        <div class="row-actions"> 
         <span> 
          <span><button (click)="onQuestionSave()">Add follow-up question</button></span> 
         </span> 
        </div> 
       </li> 

       <!-- Follow Up Question --> 
       <li *ngIf="copyrightQuestion"> 
        <copyright-question [question]="copyrightQuestion"></copyright-question> 
       </li> 
      </ul> 
    `, 
    directives: [forwardRef(() => QuestionComponent)] 
}) 

export class AnswerComponent implements OnInit { 
    @Input() answer: Answer; 

    copyrightQuestion: Question = null; 

    constructor() {} 

    ngOnInit() { 

    } 

    onQuestionSave() { 
     //content: string, isAnswer: boolean, answers?: Answer[], 
     //  isRoot?: boolean, parentQuestion?: string 

     const question: Question = new Question('Follow-up question', false, null, 
     false, null); 
     this.copyrightQuestion = question; 
    } 
} 

Answer 2

嘗試Elvis運算符?.內插值。

{{ answer?.answerTxt }} 

萬一answer是falsy（未定義，空，等等），它不會訪問answerTxt構件。

answer將會是null直到您得到迴應。