Angular 在不重新加载零部件的情况下更改零部件样式

我有一组从父组件获取的图像，
然后将其作为输入推送到子级1，并将其作为背景从第一个到最后一个排列在子级中，并可以从子级对其重新排序，
但只有在我重新加载页面时，样式才适用

如何解决这个问题

这是父级中以数组作为输入的实现

这是我从弹出对话框中重新排序的子ts文件

export class BrandHeaderComponent implements OnInit, AfterContentChecked {
    @Input() images: Image[] = [new Image()];
    
    editMode: boolean;
    
    companyBrand: Brand = new Brand();
    
    imagesPlaceholder: any[] = [
      { imageUrl: 'assets/images/gallery/placebolder_image_1.jpg' },
      { imageUrl: 'assets/images/gallery/placebolder_image_2.jpg' },
      { imageUrl: 'assets/images/gallery/placebolder_image_3.jpg' },
      { imageUrl: 'assets/images/gallery/placebolder_image_4.jpg' },
      { imageUrl: 'assets/images/gallery/placebolder_image_5.jpg' }
    ]

    constructor(
      private route: ActivatedRoute,
      public dialog: MatDialog) { }

    ngOnInit(): void {
      this.route.queryParams.subscribe((params) => {
        this.editMode = params.edit == 'true' ? true : false;
      });
      this.companyBrand = JSON.parse(localStorage.getItem('perePublic'));

    }

    ngAfterContentChecked() {
      if (this.companyBrand.images.length > 0) {
        this.images = this.companyBrand.images;
      } else {
        this.images = this.imagesPlaceholder;
      }
      this.images.sort(this.sortImgs)
    }

    rearrangeImgs() {
      let length = this.images.length;

      if (this.images.length < 5) {
        for (let i = 5; i > length; i--) {
          let img = new Image();
          img.imageUrl = this.imagesPlaceholder[i - 1];
          img.imageType = 'placeholder';
          this.images.push(img)
        }
      };
    }
  
    sortImgs(a, b) {
      // sort images accroding to the priority

      const imgA = a.priority;
      const imgB = b.priority;

      let comparison = 0;
      if (imgA > imgB) {
        comparison = 1;
      } else if (imgA < imgB) {
        comparison = -1;
      }
      return comparison;
    }

    onEditImages() {
      this.rearrangeImgs();
      const dialogRef = this.dialog.open(ModalEditBrandImagesComponent, {
        width: '600px',
        maxHeight: '90vh',
        autoFocus: false,
        disableClose: true,
        data: {
          images: this.images,
          companyId: this.companyBrand.id
        }
      });

      dialogRef.afterClosed().subscribe(dialogResult => {

      });

      dialogRef.componentInstance.onSave.subscribe((res) => {
        this.images = res;
      });
    }
}

导出类BrandHeaderComponent实现OnInit，AfterContentChecked{
@输入（）图像：图像[]=[新图像（）]；
编辑模式：布尔；
公司品牌：品牌=新品牌（）；
imagesPlaceholder:任何[]=[
{imageUrl:'assets/images/gallery/placebolder_image_1.jpg'}，
{imageUrl:'assets/images/gallery/placebolder_image_2.jpg'}，
{imageUrl:'assets/images/gallery/placebolder_image_3.jpg'}，
{imageUrl:'assets/images/gallery/placebolder_image_4.jpg'}，
{imageUrl:'assets/images/gallery/placebolder_image_5.jpg'}
]
建造师(
专用路由：激活的路由，
公共对话框：MatDialog）{}
ngOnInit（）：void{
this.route.queryParams.subscribe（（参数）=>{
this.editMode=params.edit==“true”？true:false；
});
this.companyBrand=JSON.parse（localStorage.getItem（'perePublic'）；
}
ngAfterContentChecked（）{
如果（this.companyBrand.images.length>0）{
this.images=this.companyBrand.images；
}否则{
this.images=this.imagesPlaceholder；
}
this.images.sort（this.sortImgs）
}
重排imgs（）{
设长度=this.images.length；
if（this.images.length<5）{
for（设i=5；i>长度；i--）{
设img=新图像（）；
img.imageUrl=this.imagesPlaceholder[i-1]；
img.imageType='占位符'；
此.images.push（img）
}
};
}
排序（a，b）{
//根据优先级对图像进行排序
常数imgA=a.优先级；
常量imgB=b.优先级；
让比较=0；
如果（imgA>imgB）{
比较=1；
}否则如果（imgA{
});
dialogRef.componentInstance.onSave.subscribe（（res）=>{
这个。图像=分辨率；
});
}
}

是否在父级中重新排列顺序？您需要对原始数组的“引用”吗？如果没有，只需在重新排列后对原始数组进行切片，子数组就应该将其拾取。您可能还可以注入ChangeDetectorRef，并运行detectChanges（）-这应该也可以。您可以提供一些代码吗？是的，顺序保存在数据库中，重新排序时必须在数据库中更新，以便我可以从父级获取它，并将其作为输入再次注入子级。您有几种方法可以触摸

图像

。那么，调用什么方法后不应用样式？onSave emmiter后