小编nst*_*ant的帖子

Vetur 在下面这一行下划线 null：

const firstRef = ref<HTMLElement>(null)

没有重载匹配这个调用。
 Overload 1 of 3, '(raw: HTMLElement): Ref', 给出了以下错误。
  “null”类型的参数不能分配给“HTMLElement”类型的参数。
 重载 2 of 3, '(raw: HTMLElement): Ref'，出现以下错误。
  “null”类型的参数不能分配给“HTMLElement”类型的参数。Vetur(2769)

这是一个浓缩的上下文。任何想法我做错了什么？

<template>
  <input id="first" ref="firstRef">
  <button type="button" @click.prevent="focusFirst">Focus</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api"
export default defineComponent({
  name: "Test",
  setup() {
    const firstRef = ref<HTMLElement>(null)
    const focusFirst = () => {
      const theField = firstRef.value
      theField.focus()
    }

    return { focusFirst }
  }
</script>

使用 Vue.js 2.6.10 和 BootstrapVue 2.0.0-rc.20 并尝试在单击单个文件组件中的单独按钮时以编程方式显示下拉列表。

<template lang='pug'>
div
  b-button(@click='loginShow') Test
  b-dropdown(id='login-dropdown', ref='dropdown', text='Login')
    b-dropdown-item(to='/login') Login
    b-dropdown-item(to='/signup') Sign up
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { BDropdown } from 'bootstrap-vue';

@Component
export default class Login extends Vue {

  private loginShow(e: any): void {
    const dropdown = this.$refs.dropdown as BDropdown;
    dropdown.visible = true;
  }
}
</script>

知道发生了什么吗？

编写了一个 Angular 13 组件，每当窗口大小调整时，它都会在 div 中绘制一些内容。

问题是获取 div 的渲染宽度。如果我不使用 setTimeout() 并延迟 170 毫秒，this.treemap.nativeElement.offsetWidth则为零。

由于树形图必须在每次调整窗口大小时重新渲染，我还尝试从 ngAfterViewInit() 调度窗口调整大小事件，但它似乎也发生得太快（所以再次this.treemap.nativeElement.offsetWidth为零）。

模板的相关部分...

  <div #treemap class="treemap col-12"></div>

和缩写代码...

// Details omitted for brevity
export class TreemapComponent implements AfterViewInit {
  @ViewChild('treemap') treemap!: ElementRef

  @HostListener('window:resize', ['$event'])
  private render() {
    const width = this.treemap.nativeElement.offsetWidth
    // code that successfully renders a treemap in the div as long as width != 0
  }

  callHack(): void {
    setTimeout(() => this.render(), 170) // testing shows 170ms is lowest possible …

如果下面的文件 test.svelte 是 /routes 中的一个页面，它会成功调用 load() 并使用它在我通过 http://localhost:3000/test 访问时检索到的 JSON 数组填充模板。如果我将此文件移动到 /lib 并将其作为 /routes/index.svelte 中的组件导入，则当我转到 http://localhost:3000 时，该组件的 load() 方法永远不会运行。

测试.svelte

<script context="module" lang="ts">
  /**
     * @type {import('@sveltejs/kit').Load}
   */
  export async function load({ fetch }) {
    const url = '/api/announcement'
    const res: Response = await fetch(url)

    if (res.ok) {
      const sections: Announcement[] = await res.json()
      return {
        props: {
          sections
        }
      }
    }

    return {
      status: res.status,
      error: new Error(`Could not load ${url}`)
     }
  }
</script>

<script lang="ts">
  export let sections: …