所以就像標題所說的那樣。我在書籍組件中有一個按鈕，當它點擊書籍組件中的 div 顏色時，導航欄組件中的另一個 div 應該改變它的顏色。
- 這是書籍組件：
export class BooksComponent implements OnInit {
status:boolean = true ;
color:boolean ;
constructor(private colorService:ShareColorService) { }
changeTheme(){
this.status = !this.status ;
} ;
public send():void{
this.colorService.updateColor(this.status) ;
}
ngOnInit(): void {
}
}
這是將資料值從書籍傳遞到導航欄組件的服務代碼：
export class ShareColorService {
private notifs = new Subject<boolean>() ;
constructor() { }
public getColor(): Observable<boolean>{
return this.notifs.asObservable() ;
}
public updateColor(color: boolean){
this.notifs.next(color) ;
}
}
這是導航欄組件：
export class NavbarComponent implements OnInit {
public navbarNewColor:boolean ;
public subscription: Subscription ;
constructor(private colorService:ShareColorService) { }
public ngOnDestroy(): void{
this.subscription.unsubscribe() ;
}
public ngOnInit(): void {
this.subscription = this.colorService.getColor().subscribe(color => this.navbarNewColor = color) ;
console.log("navbarnewcolor :",this.navbarNewColor) ;
}
}
控制 ngclass 改變顏色的三元運算子：
<nav class="navbar navbar-expand-lg navbar-light" [ngClass]="navbarNewColor ? 'bg-light':'bg-dark'">
uj5u.com熱心網友回復：
navbarNewColor您可以在此處使用更具反應性的方法，而不是通過訂閱手動將值分配給變數：
export class NavbarComponent {
public navbarClass$ = this.colorService.getColor().pipe(
map(isLightMode => isLightMode ? 'bg-light' : 'bg-dark')
);
constructor(private colorService:ShareColorService) { }
}
<nav class="navbar navbar-expand-lg navbar-light" [ngClass]="(navbarClass$ | async)">
這應該給你一個想法！
uj5u.com熱心網友回復：
我終于找到了答案！
正如我所料，這是顯而易見的。div通過發送按鈕點擊值（true 或 false）來更新顏色的服務方法只運行一次，因為它在點擊按鈕功能之外。
changeTheme(){
this.status = !this.status;
this.colorService.updateColor(this.status);
console.log(this.status);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332673.html
標籤：html 有角的 打字稿 bootstrap-4