angular 6 + show hide element with ngIf 不起作用答案

【问题标题】：angular 6 + show hide element with ngIf doesn't workangular 6 + show hide element with ngIf 不起作用
【发布时间】：2023-03-06 00:26:01
【问题描述】：

我是角度新手。我有这样的 app.component.html：

<app-login *ngIf="!loggedIn"></app-login>
<section *ngIf="loggedIn" style="background:#EBF0F5;">
    <div class="container">       
        <div class="board">                    
            <msw-navbar ></msw-navbar>      
            <div class="tab-content">
                <!-- Nested view  -->
                <ui-view></ui-view>
            </div>
            <!-- End Content Area -->
        </div>
        <pre>{{ formData | json }}</pre>
    </div>
</section>

我想显示登录页面并在登录后隐藏而没有任何控制或其他东西。我有 login.ts

export class LoginComponent implements OnInit {
  logginIn: boolean = true;
}

在登录中点击：

 login() {
    this.logginIn = true;
}

在 app.component.ts 中

    export class AppComponent implements OnInit {      
    @Input() formData;
    loggedIn: boolean = false;
}

  <div class="content">
  <form class="login-form">
      <h3 class="form-title">Login to your account</h3>
      <div class="alert alert-danger display-hide" style="display: none;">
        <button class="close" data-close="alert"></button>
        <span> Enter any username and password. </span>
      </div>
      <div class="form-group">
        <div class="input-icon">
          <i class="fa fa-user"></i>
          <input id="userName" name="userName" 
          class="form-control" required
          [(ngModel)]="user.userName"
          autofocus="autofocus" />
        </div>
      </div>
      <div class="form-group">
        <div class="input-icon">
          <i class="fa fa-lock"></i>
          <input id="password" name="password" 
          class="form-control" required 
          [(ngModel)]="user.password"
          type="password"/>
        </div>
      </div>

      <div class="row">
          <div class="col-xs-12">
            <div class="alert alert-danger" 
            *ngIf="securityObject &&
                   !securityObject.isAuthenticated">
              <p>Invalid User Name/Password.</p>
            </div>
          </div>
        </div>
      <br>
      <div class="text-right">
          <button class="btn-lg btn pull-right btnCol" (click)="login()">
              Login
            </button>  
      </div>
    </form>

我应该在 app.component 中添加什么来从登录组件中获取值是真还是假？组件如何相互通信？谢谢你

【问题讨论】：

angular.io/guide/component-interaction
你怎么调用login()点击方法？你能分享HTML吗？在 LoginComponent 中的 loggedIn: 之前添加 @Input() 装饰器，以将数据从应用程序传递到 LoginComponent
用 HTML 代码编辑，我在 app.component 中遗漏了一些东西我无法从登录组件中读取值。
您可以将事件绑定与@Output 和EventEmitter 一起使用
你能告诉我怎么做吗？我试过但没有成功：@Output() valueChange = new EventEmitter();在登录组件和 login() { this.logginIn = true; this.valueChange.emit(this.logginIn) }

标签： angular

【解决方案1】：

在你的 app.component.html 中：

<app-login *ngIf="!loggedIn" (loggedIn)="isLogged($event)"></app-login>

在您的 login.component.ts 中：

@Output() loggedIn = new EventEmitter<boolean>();

login() {
 this.loggedIn.emit(true);
}

在您的 app.component.ts 中：

isLogged(logged:boolean) {
  this.loggedIn = logged;
}

我希望这会有所帮助

【讨论】：