输入更改值时角度组件不更新

Question

所以我有一个从对象中获取值的组件。我让外部 div 订阅了一个行为主题。当我使用 next() 更新行为主题值时，容器 div 的标题会更新，但内部组件拒绝重新渲染。我在这里做错了吗？

这是我的控制器中的行为主体，这在ngOnInit 方法中调用，而在 html 中单击按钮时调用的更新方法：

ngOnInit() {
  this.selectedRole$.next({ name: 'Current Permissions', permissions: this.getUserPermissions()
}

showRoleDetails(role: any): void {
  this.selectedRole$.next(role);
}

这里是父组件 html，这是我使用异步订阅行为主题的地方。 selectedRole.name 完美更新，但内部 c-permissions-display 不会重新渲染：

<div *ngIf="selectedRole$ | async as selectedRole" class="col-8">
  <h5 class="font-weight-medium mb-0 text-gray-500 mb-4 permissions-title">{{ selectedRole.name }}</h5>
  <div class="section-container">
    <c-permissions-display [permissions]="selectedRole.permissions"></c-permissions-display>
  </div>
</div>

这里是c-permissions-display 组件：

import { Component, OnInit, Input } from '@angular/core';
import { UtilityService } from 'src/app/canopy-common/services/utility.service';

@Component({
  selector: 'c-permissions-display',
  templateUrl: './permissions-display.component.html',
  styleUrls: ['./permissions-display.component.scss']
})
export class PermissionsDisplayComponent implements OnInit {

  @Input() permissions: any[];
  formattedPermissions: any[];

  constructor(
    private util: UtilityService
  ) { }

  ngOnInit() {
    this.formattedPermissions = this.formatPermissionsArray();
  }

  private formatPermissionsArray(): any {
    return stuff
  }
}

如果我在ngOnInit 中放置一个控制台日志，它会在页面加载时调用一次，但在针对行为主题调用next() 后不再调用。我知道如果我实现OnChanges 然后ngOnChanges() 方法，我可以让它工作，但我不应该这样做，如果它的输入改变值，它应该自行更新和重新渲染。除非他们在 Angular 9 中改变了这一点

Answer 1

而不是将值传递给子组件。您可以将 observable 传递给子组件并在子组件内订阅，以便在父组件子组件中的值更改时得到通知。

试试这个

parent.component.html

<div *ngIf="selectedRole$ | async as selectedRole" class="col-8">
  <h5 class="font-weight-medium mb-0 text-gray-500 mb-4 permissions-title">{{ selectedRole.name }}</h5>
  <div class="section-container">
    <c-permissions-display [permissions]="selectedRole$"></c-permissions-display>
  </div>
</div>

child.component.ts

export class PermissionsDisplayComponent implements OnInit {

   @Input() permission = new BehaviorSubject(null);
   formattedPermissions: any[];

  constructor(
    private util: UtilityService
  ) { }

  ngOnInit() {
    this.permission.subscribe(permission=>{
        this.formattedPermissions = this.formatPermissionsArray();
    })

  }

  private formatPermissionsArray(): any {
    return stuff
  }
}

Answer 2

我想我记得是因为 selectedRole.permission 是一个数组，而 Angular 不知道这个数组中的值是否正在改变。

所以要使数组也刷新，您必须用新的权限数组覆盖权限数组。类似于 selectedRole.permission = [新权限数组]。

这种方式angular应该能够检测到变化并刷新视图。