Angular2：变量更改时视图不更新

Posted 2023-02-16

【中文标题】Angular2：变量更改时视图不更新

【英文标题】：Angular2: View does not update when variable changes

【发布时间】：2016-07-30 08:08:25

【问题描述】：

我有一个简单的组件，它封装了 router-outlet。我已经设置了一个发出事件的简单服务。此事件被组件捕获并更新变量，然后更新视图中的 [class]。

Sidebar.component.ts

import  Component, OnInit  from '@angular/core';
import  ROUTER_DIRECTIVES  from '@angular/router';
import  SidebarService  from '../sidebar.service';
import  Subscription  from 'rxjs/Subscription';

@Component(
  moduleId: module.id,
  selector: 'app-sidebar',
  templateUrl: 'sidebar.component.html',
  styleUrls: ['sidebar.component.css'],
  directives: [ROUTER_DIRECTIVES]
)

export class SidebarComponent implements OnInit 
  showSidebar:boolean = false;
  subscription:Subscription;

  constructor(public sidebarService: SidebarService) 
    this.subscription = this.sidebarService.sidebarEvent$.subscribe(this.toggleSidebar);
  

  ngOnInit() 

  

  toggleSidebar (state) 
    console.log(state);
    this.showSidebar = state;
  

sidebar.service.ts

import  Injectable, EventEmitter  from '@angular/core';
import BehaviorSubject from 'rxjs/BehaviorSubject';

@Injectable()
export class SidebarService 

  private _sidebarEventSource = new BehaviorSubject<boolean>(false);
  sidebarEvent$ = this._sidebarEventSource.asObservable();
  constructor()  

  open () 
    this._sidebarEventSource.next(true);
  

  close () 
    this._sidebarEventSource.next(false);
  

我试过这个：Angular2: view is not updated from inside a subscription。

Error: ORIGINAL EXCEPTION: TypeError: Cannot read property 'run' of undefined

我已经使用 ng-cli 构建了我的应用程序。

不用说，我对 angular2 完全陌生，并且有 ng1 的背景。所以这些编码风格对我来说是一个新世界。

顺便说一句，感谢您的光临。 :)

【参考方案1】：

constructor(public sidebarService: SidebarService) 
    this.subscription = this.sidebarService.sidebarEvent$.subscribe((data)=>
        this.toggleSidebar(data);
   );

【讨论】：

谢谢。有效。但是你能解释一下为什么早些时候，函数正在调用并且控制台输出即将到来。但是，视图没有更新？

再次使用之前的代码检查控制台。我觉得它并没有每次都改变。