Question

Angular2：有没有办法知道什么时候碰到这个组件的子组件会隐藏，丢失或获得可见性？

template: `
   <div [hidden]="!active" class="pane">
       <ng-content></ng-content>
    </div>
    `

问候

肖恩

Answer 1

更新的答案

我想我明白你现在正在寻找什么。您希望组件本身知道它是否被隐藏。我想你可能会做这样的事情，但是，我还没有测试过......

import {Component, OnInit, ElementRef} from '@angular/core';

@Component({
    selector: 'child-component',
    template: `<div>Hello</div>`
})

export class ChildComponent implements OnInit {
    constructor(private elementRef: ElementRef) { }

    ngOnInit() {
        const element = this.elementRef.nativeElement;

        if(element.offsetParent == null) {
            // element is not visible
        }
    }
}

可以在此post找到offsetParent的使用。

原始回答

您可以在active更改时发出事件。

import {Component, Output, EventEmitter} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <div [hidden]="!active" class="pane">
       <ng-content></ng-content>
    </div>
    <button (click)="toggleActive()">Click</button>`
})

export class MyComponent {
    @Output onActive = new EventEmitter<bool>();
    active: boolean;

    toggleActive() {
        if(this.active) {
            this.active = false;
        } else {
            this.active = true;
        }

        this.onActive.emit(this.active);
    }
}

然后只在您的父组件中订阅该事件。

angular2：有没有办法知道隐藏组件的时间？

1 个答案: