javascript - Angular 首先渲染组件，然后在 ng-If 中移除另一个组件

Question

我使用 ngif 指令一次显示两个组件。

<app-root>
   <first-Comp *ngIf="showFirst"></first-Comp>
   <second-Comp *ngIf="!showFirst"></second-Comp>
</app-root>

要点是

1. showFirst 变量使用 true 进行初始化。
2. first-comp 包含一个高度为 100px 的元素；
3. second-comp 有动态元素

在第二个组件中，我使用 ngOnInit 中的 document.body.scrollHeight 计算高度

问题是当 showFrist 变为 false 时，angular 首先呈现第二个组件，然后删除 第一个组件。结果我得到了 100+ 而不是 0 的高度。但是我需要在组件渲染上只使用 second-comp 的 body 高度。

另一个我没有提及的重要事项，因为我认为这可能不会妨碍。这是第一个和第二个组件都脱离了 Angular 自动变化检测以提高性能。我有一个像这样的基础组件

export class BaseComponent {
private subscriptions: Subscription[] = [];

  constructor(private childViewRef: ChangeDetectorRef) {
      this.childViewRef.detach();
  }

  public updateUI(): void {
    try {
        this.childViewRef.reattach();
        this.childViewRef.detectChanges();
        this.childViewRef.detach();
    } catch (ex) {
        // ignored
    }
  }

  protected addSubscriptions(subs: Subscription) {
    this.subscriptions.push(subs);
  }

  protected unSubscribeSubscriptions() {
    this.subscriptions.forEach(item => item.unsubscribe());
    this.subscriptions = [];
  }
}

除了AppComponent之外的所有组件都继承了这个BaseComponent所以 SecondComp 的代码看起来像这样。

@Component({
  selector: 'second-comp',
  templateUrl: './SecondComponent.component.html',
  styleUrls: ['./SecondComponent.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SecondComponent extends BaseComponent implements OnInit, AfterViewInit{
   constructor(private ref:ChangeDetectorRef){
     super(ref);  
   }

   ngAfterViewInit(): void {
     this.updateUi();
     this.publishHeight()
   }

   ngOnInit() {
    this.updateUi();
    this.publishHeight()
   }
}

我遇到这种意外行为有什么问题吗？

Answer 1

感觉你做的方式不对。您可以在 second-comp 构造函数中注入(inject) @Self，它将为您提供其自身(second-comp)的 ElementRef。

constructor( @Self() private element: ElementRef ) {}

它可能不起作用，但不会受到 first-comp 的影响

ngOnInit() {
    this.element.nativeElement.offsetHeight //the height for whatever you need it for
}