CybrZr00
commented
5 years ago This is no longer an issue! It turns out that I needed to setup the root in the oninit, and the setup the observer in afterviewinit, obviously (now I figured it lol) the values I needed weren't available straight away here's what I did:
export class HomeComponent implements OnInit, AfterViewInit {
callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0 && entry.isIntersecting) {
this.nbService.broadcastLinkChange(entry.target.id);
console.log("intersect")
}
});
};
root: any;
options = {
root: this.root,
rootMargin: '0px 100%',
threshold: 0.25
}
//observer = new IntersectionObserver(this.callback, this.options);
constructor(private nbService: NavbarService) { }
ngOnInit() {
this.root = document.querySelector('app-home');
}
ngAfterViewInit() {
let observer = new IntersectionObserver(this.callback, this.options);
let list = document.getElementsByTagName('section');
for (var i = 0; i < list.length; i++) {
observer.observe(list[i]);
}
}
}Hopefuly this will help others!
So I have a weird issue, this is after I have pretty much replace all of the Angular part of this project with the exception of required files such as boot.server etc.
I made a Git repository for it here: https://github.com/CybrZr00/SilverstreamKennels
(dont forget to rebuild node-sass and create migrations!)
I noticed that when I view page source (as you do to be sure all is well) on my home page, and only the home page! only the navbar component is present within the app-root.
<app-root ng-version="6.1.10"><script class="preboot-inline-script">prebootInitFn();</script><div class="main-page"><appc-simple-notifications><div class="simple-notification-wrapper top right"><!----></div></appc-simple-notifications><app-navbar _nghost-sc2="" class="ng-tns-c2-0">NAVBAR CODE REMOVED</app-navbar><main role="main"><router-outlet></router-outlet></main></div></app-root>I'm wondering if it's something to do with using IntersectionObserver or maybe there's an issue with routing to 'home', I should also note that I made a custom link-service and there are multiple components that are currently unused as this was going to be used as a template for my future projects. I have also removed bootstrap and used my own (Some copied) css.
I was also getting the error
Which seems unrelated as when I move the scripts above renderbody() the error goes but the main issue remains.
I was hoping someone may be able to shed some light since this, it would be appreciated!