Angular：使用 *ngIf 隐藏组件不起作用

Question

我刚开始使用Angular 并且已经遇到了一个问题：一个按钮实际上切换了我需要的变量（显示）但它不会影响 course.component

course.component 必须显示app-csgo-course，布尔值show 为真，因为组件可见，但在navbar.component 中切换后，没有任何变化。

<app-csgo-course *ngIf="show"> </app-csgo-course>

import { NavbarComponent } from './../navbar/navbar.component';
import { Component, OnInit} from '@angular/core';
import { CourseService } from 'src/app/course.service';


@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }

  service = new CourseService;
  show = this.service.GetShow();
}

在 navbar.component 中有一个按钮可以切换“显示”变量

      <button (click)="ToggleShow()" >
        <li class="nav-item active" id="csgo-logo">
          <a href="#">
            <img class="game-logo" src="assets\img\csgo-logo.png" title="Counter Strike: Global Offensive">
            <!-- <a>CS:GO <span class="sr-only">(current)</span></a> -->
          </a>
        </li>
      </button> 

import { CourseService } from 'src/app/cheat.service';
import { Component, OnInit, Input, Output, } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  service = new CourseService;
  show = this.service.GetShow();

  ngOnInit(): void {
    
  }

  public ToggleShow() {

    this.service.show = this.service.ToggleShow();
    console.log(this.service.show);
    return this.service.show;
  }
}

course.service 文件

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  show: boolean = true;

  GetShow() {
    return this.show;
  }

  ToggleShow() {
    return this.show = !this.show
  }

  constructor() { }
  }
}

非常感谢您的帮助！

Answer 1

由于您是 Angular 新手，让我为您分解一下。

1. 您需要创建一个BehaviorSubject 来捕获切换事件（这称为反应式编程，这是在Angular 中使用RxJS 实现的）。

2. 不要将new 用于服务，而是在构造函数中注入。

course.service

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  private show: boolean = true;
  private toggle$ = new BehaviorSubject<boolean>(true);

  constructor() { }

  toggleEvent() {
    return this.toggle$.asObservable();
  }

  toggleShow() {
    this.show = !this.show
    this.toggle$.next(this.show);
  }
}

在导航栏组件

import { CourseService } from 'src/app/cheat.service';
import { Component, OnInit, Input, Output, } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  show = boolean;

  // IMP: make sure to inject the service and not do "new CourseService;"
  constructor(public service: CourseService){}

  ngOnInit(): void {
    this.service.toggleEvent().subscribe(showFlag => {
       this.show  = showFlag;
    })
  }

  public ToggleShow(): void {
    this.service.toggleShow();
  }
}

在课程组件

import { Component, OnInit} from '@angular/core';
import { CourseService } from 'src/app/course.service';


@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
 
 show: boolean ;
 // IMP: make sure to inject the service and not do "new CourseService;"
  constructor(public service: CourseService){}

  ngOnInit(): void {
    this.service.toggleEvent().subscribe(showFlag => {
       this.show  = showFlag;
    })
  }
  
}

---

PS：我建议您阅读“如何取消订阅 observable”以及它如何导致内存泄漏。一旦你有了一些想法，你也应该在上面提供的代码中实现它。这是一个最佳实践。快乐学习。如果您还有其他问题，请告诉我