从 ViewChild 的别名调用组件类型

Question

所以我的角度项目中有一个

index.d.ts

文件。其中我的一个组件有一个别名：

export declare const List: typeof ListComponent;

然后我将别名导入到我的其他组件之一中：

import { List } from '/path'

然后我尝试使用我的别名作为 @ViewChild 装饰器的类型：

@ViewChild(List, { static: true }) list: List;

但这会返回一个 typeof 错误，指出 List 是一个值而不是类型——我对此是理解的。我一直在尝试找到解决此问题的方法，但没有运气。有什么想法吗？

Answer 1

ViewChild

的左侧仅接受一个类，因此您必须按原样提供

ListComponent

，但右侧接受

typeof ListComponent

，但我们需要以不同的方式声明它，请检查下面的代码！

索引.D.TS

import { ListComponent } from './app/list/list.component';

export type List = typeof ListComponent;

主要

import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ListComponent } from './app/list/list.component';
import { List } from '.';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  @ViewChild(ListComponent, { static: true }) list!: List;
  name = 'Angular';
}

bootstrapApplication(App);

Stackblitz 演示