Angular 视图中的角度自定义元素

我有以下资料：

main.module.ts

//Importing "my_section"
...
import { my_section } from './my_section';

@NgModule({
   declarations: [...],
   imports: [..., my_section],
   exports: [...]
})
export class main_pageModule {}

...
@Component({
  selector: 'my_section',
  templateUrl: 'my_section.html'
})

export class my_section{
 ...
}

main.html

 //As an example, let say I have three "my_section"
<div class="top">
    <my_section></my_section>
    <my_section></my_section>
    <my_section></my_section>
</div>

---

这是它的简化版本：如您所见，

从

my\u section.ts

导入

main.module.ts

当每个

都在视图中时，我试图触发一个函数

我尝试使用

ViewChild

，但没有成功

你知道我如何检测自定义元素何时出现吗

谢谢

尝试在组件中使用decorator（而不是像示例中那样在模块中）：

从'@angular/core'导入{AfterViewInit，Component，QueryList，ViewChildren}；
从“/my_section”导入{my_section}；
...
类实现AfterViewInit{
@ViewChildren（my_部分）mySections:QueryList；
ngAfterViewInit（）{
//mySections是在这个阶段设置的
//你可以听我的部分改变
this.mySections.changes.subscribe（节=>{
//第节可用
});
//或者只是迭代可用的部分
this.mySections.forEach（section=>{
//第节可用
});
}
}

可能重复您是否尝试使用了

getBoundingClientRect

？还是IntersectionObserver API？

import { AfterViewInit, Component, QueryList, ViewChildren } from '@angular/core';
import { my_section } from './my_section';

...

class <YOUR_COMPONENT_NAME> implements AfterViewInit {
  @ViewChildren(my_section) mySections: QueryList<my_section>;

  ngAfterViewInit() {
    // mySections are set at this stage

    // you may listen to mySections change
    this.mySections.changes.subscribe(section => {    
      // section is available
    });

    // or just iterate over available sections
    this.mySections.forEach(section => {    
      // section is available
    });
  }
}