Question

我试图从我的指令中检索元素并对其进行一些css更改。但它总是告诉我nativeElement is undefined

我尝试了两种方式：

@ViewChild
@ContentChild

他们两个都没有工作。

我的父母html：

<div class="col-lg-12 module_style" id="module-wrapper">
    <div class="col-lg-12">
        <p class="left-alignment">
            <b><i class="fa fa-file-text fa-lg" aria-hidden="true"></i> Market Category: </b>
            {{item.marketCategory}}
        </p>
        <p class="right-alignment" id="moduleCog" [moduleOpt]="item">
            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
        </p>
        <module-modal #moduleModal [data]="item"></module-modal>
    </div>
    <div class="col-lg-12"><p class="left-alignment">{{item.source}} <i class="fa fa-long-arrow-right fa-lg" aria-hidden="true"></i> {{item.target}}</p></div>
</div>

Child html：“module-modal”

<div id="modal-container">
    <div class="modal-background">
    <div class="modal">
      <h2>I'm a Modal</h2>
      <p>Hear me roar.</p>
    </div>
  </div>
</div>

我的指示：

import { Directive, ElementRef, Input, Renderer, ViewChild, HostListener, OnInit, ContentChild } from '@angular/core';

@Directive({
    selector: '[moduleOpt]'
})

export class ModuleOptDirective implements OnInit{
    showModal: boolean = false;
    @Input('moduleOpt') moduleOpt: any;
    @ContentChild('moduleModal') moduleModal: ElementRef;
    //@ViewChild('moduleModal') moduleModal: ElementRef;
    constructor(private _renderer: Renderer) {}

    ngOnInit() {

    }

    @HostListener('click', ['$event'])
    showDetails(event) {
        console.log(event);
        console.log(this.moduleOpt);
        this._renderer.setElementClass(this.moduleModal.nativeElement, 'modal-animate', true);

    }

}

有人可以帮我这个吗？

Answer 1

发现问题

this._renderer.setElementClass(this.moduleModal.nativeElement, 'modal-animate', true);

this.moduleModal.nativeElement使用nativeElement的错误用法原来this.moduleModal不是空的...... 而是使用this.moduleModal.nativeElement我应该使用以下内容：

...
export class ModuleOptionComponent implements OnInit {
    @Input('item') item: any;
    //@ViewChild('moduleModal') moduleModal: ElementRef

    constructor(
        private _renderer: Renderer,
        private _elem: ElementRef
    ) {}

    ngOnInit() {
    }

    @HostListener('click', ['$event'])
    showDetails(event) {
        this._renderer.setElementClass(this._elem.nativeElement, 'modal-animate', true);

    }
}

这将只选择应用此指令的DOM对象。

如何在angular2指令中检索DOM对象

1 个答案: