Question

当我的组件变得可见时，Angular2中是否有一种方法可以触发事件？它被置于tabcontrol中，我希望在用户切换时通知我我的组件可以触发事件。

Answer 1

我最终做了什么（虽然不是很漂亮，但在我没有更好的方法可行的情况下工作......）是使用ngAfterContentChecked()回调并自己处理更改。< / p>

@ViewChild('map') m;
private isVisible: boolean = false;
ngAfterContentChecked(): void
{
    if (this.isVisible == false && this.m.nativeElement.offsetParent != null)
    {
        console.log('isVisible switched from false to true');
        this.isVisible = true;
        this.Refresh();
    }
    else if (this.isVisible == true && this.m.nativeElement.offsetParent == null)
    {
        console.log('isVisible switched from true to false');
        this.isVisible = false;
    }
}

Answer 2

您可以使用ngAfterViewInit()回调

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

<强>更新

可以使用新的Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 另请参阅https://stackoverflow.com/a/44670818/217408

Answer 3

没有此类事件，但如果您使用的是标签控件，那么执行此操作的正确方法是为标签控件创建标签更改@Output（如果它是自定义的），否则，大多数标签控件（如ng-bootstrap）也有一些标签更改事件。

如果您的组件必须知道这一点，您可以使用此选项卡更改事件来检测哪个选项卡可见，如果您知道哪个选项卡可见，您还可以知道您的组件是否可见。所以你可以这样做：

onTabChange(event) {
    this.currentTab = /** Get current tab */;
}

然后，如果您有输入，则可以将其发送到您的组件：

@Input() activated: boolean = false;

然后您可以将其应用于：

<my-component [activated]="currentTab == 'tabWithComponent'"></my-component>

现在，您可以收听OnChanges，了解模型值activated是否已更改为true。

您还可以重构此操作以使用Observable这样的服务：

@Injectable()
export class TabService {
  observable: Observable<any>;
  observer;

  constructor() {
    this.observable = Observable.create(function(observer) {
      this.observer = observer;
    });
  }
}

当某个组件希望收听这些更改时，它可以订阅tabService.observable。当您的标签更改时，您可以使用tabService.observer.next()将新项目推送到该标签。

Answer 4

对于那些在家看电视的人，您现在可以使用ngAfterContentInit()了，至少无论如何在Ionic上。 https://angular.io/guide/lifecycle-hooks

Answer 5

我有相同的目的，无法达到满意的目的。第一个答案会打电话很多次。我使用的折衷方式当然也不是优雅。在父组件中，我设置了一个方法：

parentClick() {
  setTimeout(() => {
    // TO-DO 
    This.commonService.childMethod();
  }, time);
}

也许该方法在时间上不准确，但是从某种程度上讲，您已经达到了命运。

组件变得可见时的事件

5 个答案: