Question

我正在使用<PackageReference Include="System.Reflection.Emit"> <Version>4.3.0</Version> <ExcludeAssets>all</ExcludeAssets> </PackageReference>开发一个有角度的网站。我在一个视图中创建了一个多次使用的组件。要访问它，请在此组件的构造函数中为组件创建唯一的Id。

在Angular 5.2.1活动中，我想订阅一个活动。但似乎在AfterViewInit被解雇后，该组件仍然无法在短时间内可用。

HTML

AfterViewInit

组件

<a data-toggle="collapse" href="#{{componentId}}">Toggle</a>

<div id="{{componentId}}" class="collapse">
    <!-- tabset content -->
</div>

据我所知，当组件完全初始化并添加到DOM时，通常会触发declare var $: any @Component({ selector: 'my-component', templateUrl: './my-component.component.html' }) export class MyComponentComponent implements OnInit, AfterViewInit { // Some inputs public componentId: string // Some other component variables constructor( private generatorService: GeneratorService ) { // Generate unique Id for the component, length 10 this.componentId = this.generatorService.generateId(10) } ngOnInit() { } ngAfterViewInit(): void { console.log(this.componentId) // Correct id is printed to console console.log($('#' + this.componentId)) // Returning empty result // So this is not working: $('#' + this.componentId).on('hide.bs.collapse', () => { // Do something }) } // Some other code }。当我等待一会儿并手动将AfterViewInit写入控制台时，我得到了正确的结果。

我做错了什么？

Answer 1

好的，我刚发现了一个肮脏的解决方法。

我写了一个递归方法，最初在AfterViewInit方法中调用。

我的组件现在看起来如下

declare var $: any

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html'
})

export class MyComponentComponent implements OnInit, AfterViewInit {
    // Some inputs

    public componentId: string
    // Some other component variables

    private iteration: number = 0

    constructor(
        private generatorService: GeneratorService
    ) {
        // Generate unique Id for the component, length 10
        this.componentId = this.generatorService.generateId(10)
    }

    ngOnInit() {
    }

    ngAfterViewInit(): void {
        console.log(this.componentId) // Correct id is printed to console

        this.registerEvents()
    }

    registerEvents() {
        setTimeout(() => {
            if (!('#' + this.componentId)[0]) {
                this.iteration++
                this.registerEvents()
                return
            }

            console.log(this.iteration) // Prints a value between 3 and 5
            $('#' + this.componentId).on('hide.bs.collapse', () => {
                // Do something
            })
        }, this.iteration * 10)
    }

    // Some other code
}

我不知道为什么会这样，但现在我可以再次工作了。

AfterViewInit过早被调用？

1 个答案: