Angular 角度6+；使用ngIf不显示隐藏元素'；行不通

我是新手。我的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>

在登录中，单击：

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

在app.component.ts中

  <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>

登录名为login.html

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

登录到您的帐户
输入任何用户名和密码。
无效的用户名/密码



登录

---

我应该在app.component中添加什么才能从登录组件获取值true或false？组件如何相互通信？谢谢你的app.component.html中的：

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

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

---

我希望这将有助于

如何调用

login（）

click方法？你能分享HTML吗？在LoginComponent中的

loggedIn:

之前添加@Input（）修饰符要将数据从应用程序传递到LoginComponent编辑HTML代码，我在app.component中缺少一些内容我无法读取登录组件中的值。您可以将事件绑定与@Output和eventemitter一起使用。您能告诉我如何使用吗？我尝试过，但没有成功：@Output（）valueChange=neweventemitter（）；在login组件和login（）中{this.logginIn=true；this.valueChange.emit（this.logginIn）}

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

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

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

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