Question

我有一个使用不同组件的简单应用程序，所有组件都在导航栏组件旁边的路由器中配置。这些组件在父组件中调用。像那样：

<app-nav>

</app-nav>

<router-outlet></router-outlet>

我想隐藏路由器插座的特定组件中的导航栏。我尝试了许多技巧，但徒劳无功。

Answer 1

如果您有像redux或ngrx这样的州管理策略，您可以使用商店。否则，您可以使用服务。

让app组件为nav注入服务，并让需要影响菜单的组件也注入nav服务。然后，组件可以在ngOnInit或必要时在服务上设置标志。应用程序组件可以订阅服务上的值并根据需要隐藏菜单。

app.component.html - 使用异步管道检查布尔值的observable值，看看是否应该显示导航：

<app-nav *ngIf="showNav | async"></app-nav>

app.component - 导入导航服务并获取将保存布尔值的showMenu BehaviorSubject：

import { NavService } from 'nav.service';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-root'
})
export class AppComponent {
  showMenu: BehaviorSubject<boolean>;

  constructor(private navService: NavService) {}

  ngOnInit() {
    this.showNav = this.navService.getShowMenu();
  }
}

nav.service - 创建在实例化服务时在布尔值中保存导航状态的BehaviorSubject，并提供返回BehaviorSubject的方法以及为其设置新值：

import { BehaviorSubject } from 'rxjs';

@Injectable()
export class NavService {
  private showMenu: BehaviorSubject<boolean>;

  constructor() {
    this.showMenu = new BehaviorSubject(true);
  }

  getShowMenu() {
    return this.showMenu;
  }

  setShowMenu(bool) {
    this.showMenu.next(bool);
  }
}

inner.component - 导入navService并在初始化内部组件时将showMenu设置为false。只要您想切换菜单，就可以调用此方法：

@Component({ selector: 'inner-component' })
export class InnerComponent {
  ngOnInit() {
    this.navService.setShowMenu(false);
  }
}

在其旁边加载特定组件时隐藏导航栏

1 个答案: