如何在不点击按钮的情况下自动启用按钮？

Question

我希望在页面加载时正确单击第一个按钮，我使用 html、css、typescript 构建它

<div class="media-column">
 <!-- posts button -->
    <button #postsButton class="media-button"(click)="applyFilter('posts')">
      <span class="media-label">Posts</span>
    </button>
  <!-- images button -->
    <button class="media-button"(click)="applyFilter('images')">
      <span class="media-label">Pictures</span>
    </button>
 <!-- videos button -->
  <button class="media-button" (click)="applyFilter('videos')">
      <span class="media-label">Videos</span>
    </button>
  </div>

我尝试过，但没用，我没有点击按钮

 @ViewChild('postsButton', { static: true }) postsButton!: ElementRef;

ngOnInit() {   
      this.postsButton.nativeElement.click();
  }

Answer 1

当调用

ngOnInit()

时，模板尚未渲染。您需要使用

ngAfterViewInit()

来代替。

@ViewChild('postsButton', { static: true }) postsButton!: ElementRef;

ngAfterViewInit() {   
  this.postsButton.nativeElement.click();
}

有关组件生命周期的更多信息，请查看 docs。