使用具有输入字段的组件时出错

Question

我有一个由以下Input字段定义的组件

class DialogComponent {
... 

    @Input() dialogMessage:string;
      @Input() dialogID:string;
      @Input() dialogContext:DialogContext;
....
}

我正在app.component.html

中按如下方式使用它

<app-dialog-box *ngIf="isSignupProcess()" #dialogBox dialogMessage="{{dialogMessage}}" [dialogID]="'appDialog'" [dialogContext]="{{dialogContext}}" ></app-dialog-box>

app.component.ts的相应字段定义如下：

  dialogMessage:string;
  dialogId:string;
  dialogContext:DialogContext;

我希望根据条件显示app-dialog-box组件，并相应地设置该组件的值。

  setDialog(message:string,context:DialogContext) {
    this.dialogMessage=message;
    this.dialogContext = context;
    //this.dialogComponent.dialogShow(context); 
  }


  isSignupProcess(){
    if(this.signup!==""){
      if(this.signup === "success") {
        this.setDialog("Signup was successful",new DialogContext("",""))
      }else if(this.signup === "error") {
        this.setDialog("Error: Signup wasn't successful",new DialogContext("",""))
      } else {
        this.setDialog("Unrecognised message: "+this.signup,new DialogContext("",""))
      }
      this.signup = "";
      return true;
    } else {
      return false;
    }

  }

我的代码未编译，并且出现错误Parser Error: Missing expected : at column 16 in [{{dialogContext}}] in ng:///AppModule/AppComponent.html@14:114 ("box *ngIf="isSignupProcess()" #dialogBox dialogMessage="{{dialogMessage}}" [dialogID]="'appDialog'" [ERROR ->][dialogContext]="{{dialogContext}}" ></app-dialog-box>

错误在第<app-dialog-box *ngIf="isSignupProcess()" #dialogBox dialogMessage="{{dialogMessage}}" [dialogID]="'appDialog'" [dialogContext]="{{dialogContext}}" ></app-dialog-box>行