Angular 6中ngIf控制元素显隐失效，组件间通信求助

嘿，作为Angular新手遇到组件间状态同步的问题太正常了！你的核心问题是LoginComponent的登录状态没法传递给AppComponent，导致登录后视图没切换。下面给你最直接的解决方案，用Angular父子组件通信的标准方式——@Output + EventEmitter：

第一步：修改LoginComponent，添加事件发射器 #

在LoginComponent里，我们需要把登录状态变化的事件“发射”给父组件（AppComponent）：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

export class LoginComponent implements OnInit {
  // 小提示：这里变量名logginIn可能是拼写失误，建议改成loggingIn更规范
  logginIn: boolean = false;
  // 定义一个输出事件，用来传递登录状态
  @Output() loginStatusChanged = new EventEmitter<boolean>();

  ngOnInit() {}

  login() {
    this.logginIn = true;
    // 触发事件，把登录成功的状态传给父组件
    this.loginStatusChanged.emit(true);
  }
}

第二步：在AppComponent模板中监听子组件事件 #

修改app.component.html，给<app-login>绑定我们刚定义的事件：

<app-login *ngIf="!loggedIn" (loginStatusChanged)="onLoginStatusChanged($event)"></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>

第三步：在AppComponent中处理状态变化 #

在AppComponent里添加一个方法，接收子组件传来的登录状态并更新自己的loggedIn变量：

import { Component, OnInit } from '@angular/core';

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

  ngOnInit() {}

  // 处理子组件传来的登录状态
  onLoginStatusChanged(isLoggedIn: boolean) {
    this.loggedIn = isLoggedIn;
  }
}

额外说明：Angular组件通信的常见方式 #

除了父子组件用@Input（父传子）+ @Output（子传父），还有几种常用场景：

• 跨层级/非父子组件：用共享服务（Service）+ BehaviorSubject来传递状态，适合全局状态（比如用户登录状态）
• 路由参数：如果是通过路由跳转传递数据，可以用路由参数或Router的navigate方法带参数
• ViewChild/ContentChild：父组件直接获取子组件的实例，调用子组件方法或访问变量（不推荐频繁使用，会提高组件耦合性）

现在你点击登录按钮，AppComponent就能收到登录状态，自动切换到主内容区域啦！

内容的提问来源于stack exchange，提问作者Brian