Question

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

这是我控制器中的行为主题，它在ngOnInit方法中被调用，而在html中单击按钮时被调用的update方法：

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

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

这是父组件html，这是我使用async订阅行为主题的地方。 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()方法，我可以使它正常工作，但是我不必这样做，如果输入更改值，它应该自行更新和重新呈现。除非他们将其更改为角度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应该能够检测到更改并刷新视图。

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

2 个答案: