Angular 2 Structural指令没有注册事件

Question

我正在创建一个结构指令，用于在窗口大小调整时添加或删除DOM中的元素。问题是即使窗口宽度大于我设置的截止值，指令也不会绘制元素。我尝试调试该指令，但我没有在window:resize事件的事件处理程序中点击任何断点。

我在我的组件中使用相同的方法为window:resize添加了另一个事件处理程序，它将运行处理程序而没有任何问题（组件中的那个）。

my-structural-directive.ts：

import{
    Directive,
    Input,
    TemplateRef,
    ViewContainerRef} from "@angular/core";

@Directive({
    selector: "[visAboveWidth]",
    host : {
        "(window:resize)" : "onResize($event)"
    }
})
export class VisibleAboveWidthDirective{
    private _defaultWidth : number = 786;
    private _visibleAbove : number;

    constructor(private _templateRef: TemplateRef<any>, private  _viewContainer: ViewContainerRef){

    }

    @Input() set visAboveWidth(width: number){
        this._visibleAbove = width;
    }

    onResize(event: Event){
        var window : any = event.target;
        var currentWidth = window.innerWidth;

        if(currentWidth < (this._visibleAbove || this._defaultWidth)){
            this._viewContainer.clear();
        }
        else{
            this._viewContainer.createEmbeddedView(this._templateRef);
        }
    }
}

我-HTML-file.html：

        <!-- Bunch of divs-->
     <thead>
            <tr>
                <th>Group</th>
                <th>Type</th>
                <th>Box</th>
                <th>Position</th>
                <th>Volume</th>
            <!-- First instance of the directive -->
                <th *visAboveWidth="786"></th>
            <!-- First instance of the directive -->
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let sample of samples">
                <td class="vert-align">{{sample.group}}</td>
                <td class="vert-align">{{sample.type}}</td>
                <td class="vert-align">{{sample.box}}</td>
                <td class="vert-align">{{sample.position}}</td>
                <td class="vert-align">{{sample.volume}}</td>

            <!-- Second instance of the directive -->
                <td class="vert-align" *visAboveWidth="786">
            <!-- Second instance of the directive -->

                    <div class="btn-group" dropdown >
                        <button class="btn btn-default">Details</button>
                        <button class="btn btn-default" dropdownToggle>
                            <span class="caret"></span>
                            <span class="sr-only">Secondary actions</span>
                        </button>
                        <ul class="dropdown-menu" dropdownMenu>
                            <li><a class="dropdown-item">Edit</a></li>
                            <li class="divider dropdown-divider"></li>
                            <li><a class="dropdown-item">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </tbody>

组件渲染时，不会显示附加指令的元素。

起初我以为是因为结构指令会清除ViewContainer所以我尝试了这种方法：

我结构性-directive.ts

    //Rest is the same 
    constructor(private _elementRef : ElementRef)
    onResize(event: Event){
        var window : any = event.target;
        var currentWidth = window.innerWidth;

        if(currentWidth < (this._visibleAbove || this._defaultWidth)){
            this._elementRef.nativeElement.style.display = "none"
        }
        else{
            this._elementRef.nativeElement.style.display = "block"
        }
    }

但这也不起作用。我在这里错过了什么吗？

Answer 1

所以我设法解决了这个问题。 我一定误解了结构指令是如何工作的。当我删除对ViewContainer和TemplateRef的引用并使用ElementRef它开始工作。当我想到它时，我认为这是有意义的。

我将指令改为以下内容： 我-directive.ts

import{
    Directive,
    Input,
    ElementRef,
    HostBinding
    } from "@angular/core";



@Directive({
    selector: "[visAboveWidth]",
    host : {
        "(window:resize)" : "onResize($event)"
    }
})
export class VisibleAboveWidthDirective{
    private _defaultWidth : number = 786;
    private _visibleAbove : number;
    constructor(private _elementRef: ElementRef){

    }

    @Input("visAboveWidth") set visAboveWidth(width: number){
        console.log("Set value");
        this._visibleAbove = width;
    }

    @HostBinding("class.visibility-hide")
    private _hide : boolean = false;

    onResize(event: Event){
        var window : any = event.target;
        var currentWidth = window.innerWidth;

        this._hide = currentWidth < (this._visibleAbove || this._defaultWidth);
    }
}

新指令语法为

visAboveWidth="786"

而不是asterix

我还在样式表中添加了.visibility-hide类：

.visibility-hide{
    display: none;
}