将数据按角度传递给子组件

Posted 2023-02-18

嘿，如果登录失败，我试图在登录页面上显示一条简单的错误消息。以下是我的login.component.html：

<div class="container shadow login-container">
  <div class="row">
    <div class="col-sm-12 text-center">

      <div class="error-message">
          <app-server-error [errorMessage]="error" ></app-server-error>  -----> not displaying on screen
      </div>


      <div class="login-form-container">
          <div class="login-input-container">
              <input [(ngModel)]="user.email" type="email" placeholder="Enter your email" class="buddha-input"/>
          </div>
          <div class="login-input-container">
              <input [(ngModel)]="user.password" type="password" placeholder="Enter password" class="buddha-input"/>
          </div>
          <div class="login-input-container">
              <button (click)="tryLogin()" class="login-form-button">Login</button>
           </div>
      </div>
    </div>
  </div>
</div>

以下是我的server-error.component.html：

<p>
  errorMessage
</p>

以下是我的server-error.component.ts

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

@Component(
  selector: 'app-server-error',
  templateUrl: './server-error.component.html',
  styleUrls: ['./server-error.component.css']
)
export class ServerErrorComponent implements OnInit 
  @Input() public errorMessage: string;

  constructor()  

  ngOnInit() 
  

“错误”没有显示在屏幕上，控制台上也没有错误。请让我知道如何解决此问题？谢谢

答案

使用[errorMessage]="error"，错误应该是变量。