无法从另一个组件强制在 aular2 中渲染

Question

我有以下情况：

组件@permissions 这个组件有一个按钮，可以触发一个简单的承诺并在我的另一个组件上设置一个值@MenuComponent

export class Permissions {
    constructor(private _menu: MenuComponent, private _api: ApiService) {}

    btnAction(){
        this._api.getDataID(item.project_name, 'usersbyID', userID).then((data: any) => {
            this._menu.checkPerm(JSON.parse(data.permissions).description);
        });
    }
}

返回什么并不重要，但它是一个简单的 JSON。

在我的另一个组件@MenuComponent

@Component({
   // ..another configuration non relevant
   changeDetection: ChangeDetectionStrategy.OnPush,
})

export class MenuComponent implements OnInit {
  menus = []
  menuPermisson: any;
  menuObservable = new Subject();

  constructor(private _cdRef: ChangeDetectorRef) {
    this.menuObservable.subscribe(value => {
      this.menuPermisson = value;
      this.reloadAll();
    });
  }

  reloadAll() {
    this.menus.push('someValue');
    this._cdRef.markForCheck();
  }

  checkPerm(data) {
    this.menuObservable.next(data);
  }
}

所以这个概念是在承诺向我的主题发送一些值之后，我需要将 someValue 推送到菜单，直到此时所有数据都可以到达那里，但我需要重新渲染视图，以便“someValue”显示在风景。但它什么也没做，当我将this._cdRef.markForCheck() 更改为this._cdRef.detectChanges() 并将其放在tryCatch 上时，它会返回Attempt to use a destroyed view: detectChanges。我找不到使用 someValue 呈现菜单的方法。

这两个组件在 ChangeDetection 树上处于同一级别

Answer 1

试试ApplicationRef.tick()。这是“始终有效”的解决方法。

import { ApplicationRef } from '@angular/core';

export SomeComponent {
    constructor(private appRef: ApplicationRef) {}

    public thisShouldCauseChangeDetection(): void {
        this.appRef.tick();
    }
}

在这里提出了类似的问题：Trigger update of component view from service - No Provider for ChangeDetectorRef

更多关于ApplicationRef：https://angular.io/api/core/ApplicationRef

您的问题的最佳解决方案是使用Component <-> Service <-> Component 通信： https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

我对这个案例的解决方案是来自 Maciej Treder 的建议， 他说：

'解决您的问题的最佳方法是使用Component <-> Service <-> Component 通信：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service'

所以我创建了一个服务来监听@PermissionModule 所做的更改并向@MenuComponent 发送一个更改事件，我可以将vales 推送到menus 数组中并呈现视图，而无需.tick() 或 .detectChanges()

服务组件

@Injectable()
export class SharedServiceMenu {

  // Observable string sources
  private emitChangeSource = new Subject<any>();

  // Observable string streams
  changeEmitted$ = this.emitChangeSource.asObservable();

  // Service message commands
  emitChange(change: any) {
    this.emitChangeSource.next(change);
  }

  constructor() { }
}

我想在哪里发布事件：

// ...irrelevant code constructor(private: _shared: SharedServiceMenu){} this._shared.emitChange(data);

我想在哪里听到变化

// ... IrrelevantCode
constructor(private _shared: SharedServicesMenu){}
this._shared.changeEmitted$.subscribe((data) => {
  //Do what ever you want with data emmited here
}, (err) => {
  console.log(err);
}, () => {
  console.log('Complete!');
});

Answer 3

不要在this.menus 中推送值，而是尝试这样的操作

reloadAll() { 
    var tmp = this.menus.slice();
    tmp.push('some valuue');
    this.menus=tmp;
}