输入更改值时 Angular 组件不更新

Question

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

这是我的 Controller 中的行为主题，它在 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
  }
}