1. 使用 CSS flex 布局 在父级元素中使用 display: flex，并且为组件视图分配一个固定或相对大小的宽度。

示例：

2. 使用自定义指令进行调整大小 创建一个自定义指令来获取 DOM 元素，并允许拖动来调整大小。

示例：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[resize]'
})
export class ResizeDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    event.preventDefault();
    const el = this.elementRef.nativeElement;
    const startX = event.pageX;
    const initialWidth = el.offsetWidth;
    const mouseMoveSub = fromEvent(document, 'mousemove')
      .pipe(
        takeUntil(fromEvent(document, 'mouseup')),
        filter((event: MouseEvent) => {
          event.preventDefault();
          return true;
        })
      )
      .subscribe((event: MouseEvent) => {
        const width = initialWidth + (event.pageX - startX);
        el.style.width = `${width}px`;
      });
  }
}

然后在组件视图中使用 resize 指令即可实现调整大小。