在 angular 中调用 @viewchild 时遇到问题

Question

大家好，我正在与 angular 合作，想在 ts 文件中调用 @viewChild，但遇到错误 "Decorators are not valid here." 无法找到解决我问题的具体方法

我尝试了很多关于这个问题的链接，包括 angular 文档、Whosebug、youtube，但找不到任何适合我的问题的解决方案

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-upload-card-details',
    templateUrl: './upload-card-details.component.html',
    styleUrls: ['./upload-card-details.component.css']
})
export class UploadCardDetailsComponent implements OnInit {
    @ViewChild(draganddropimage)
    constructor() {}

ngOnInit() {}
    }

HTML:Code
<div class="modal fade custom-modal-setting" id="drag-and-drop-image" #draganddropimage tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

Answer 1

您需要声明一个变量并为其添加装饰器：

import { Component, OnInit, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-upload-card-details',
    templateUrl: './upload-card-details.component.html',
    styleUrls: ['./upload-card-details.component.css']
})
export class UploadCardDetailsComponent implements OnInit {
    @ViewChild('draganddropimage')
    private draganddropimage: ElementRef; 

    constructor() {}

    ngOnInit() {}
    }
}

Answer 2

我认为你装饰构造函数，尝试为@ViewChild(draganddropimage) draganddropimage 设置一个名称

Answer 3

您需要导入 ElementRef，然后使用此代码段通过 ViewChild 获取模板引用：

@ViewChild('draganddropimage') dragDropImageRef: ElementRef;

Answer 4

从Angular8开始，需要在ViewChild中添加{ static: true }

这样试试：

@ViewChild('draganddropimage', { static: true }) dragDropImageRef: ElementRef;

Answer 5

刚遇到同样的问题。您需要在装饰器和构造器之间放置一些东西：

export class SomeComponent implements OnInit {
  @ViewChild(SomeChildComponent, { static: true })

  someVariable: SomeChildComponent; // this row is the magic (otherwise you decorate the constructor)

  constructor() {}

在 angular 中调用 @viewchild 时遇到问题

Facing issue while calling @viewchild in angular

angular-components

angular