Question

在具有ViewChildren属性的组件中，我想根据每个ViewChild包含的数据创建一些SVG元素。

如果我将逻辑放在AfterViewInit挂钩中，则尚未定义ViewChildren。我尝试了几种方法试图使用这个钩子没有运气。

ngAfterViewInit() {
    // ViewChildren.first is undefined
    setTimeout(() => setupSVG(this.viewChildren), 0);

    // ViewChildren.first is undefined
    setupSVG(this.viewChildren);
}

但是，如果我将逻辑放在AfterViewChecked挂钩中，它将会工作，但是一旦视图子包含其组件列表，它将被多次调用。

ngAfterViewChecked() {
    if (! this.viewChildren.first) {
        return;
    }

    setupSVG(this.viewChildren);
}

我使用静态标志确定了一个不太理想的解决方案。

class MyComponent implements AfterViewChecked {
    private static VIEW_LOADED = false;
    @ViewChildren('things') viewChildren: QueryList<AnotherComponent>;

    ngAfterViewChecked() {
        if (! this.viewChildren.first) {
            return;
        }

        if (! MyComponent.VIEW_LOADED) {
            MyComponent.VIEW_LOADED = true;
            setupSVG(this.viewChildren)
        }
    }
}

我相信有更好的方法可以解决这个问题，我在这里缺少任何想法或事情吗？

Answer 1

我不太确定，但您应该尝试在这里使用子组件的afterViewInit（）吗？文档说您的ViewChildren是在组件的afterViewInit（）之后设置的：https://angular.io/api/core/ViewChildren

您应该尝试使用子组件中的@Output。

Angular 5 viewchildren在AfterViewInit钩子中不可用

1 个答案: