如何解决Angular:使用* ngIf隐藏组件不起作用
我刚从Angular
开始,并且已经遇到了一个问题:一个按钮实际上切换了我需要的变量( show ),但是它并不影响course.component >
course.component 必须显示app-csgo-course
,布尔值show
是正确的,因为该组件可见,但是在切换到navbar.component
之后,没有任何变化。 / p>
<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() { }
}
}
将感谢您的帮助!
解决方法
由于您是Angular的新手,所以让我为您分解一下。
-
您需要创建一个
BehaviorSubject
来捕获切换事件(这称为反应式编程,这是使用RxJS
中的Angular
实现的)。 -
请勿将
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);
}
}
在 NavbarComponent
中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();
}
}
在 courseComponent
中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::我建议您阅读“如何取消订阅可观察对象”以及它如何导致内存泄漏。一旦有了想法,就应该在上面提供的代码中实现它。这是最佳做法。学习愉快。让我知道您是否还有其他问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。