I have an angular application that contains a Board where user activity is displayed. This Board is only visible in some of the areas in the application. Data on the board should not persist in DB. When I'm navigating through the application, I've observed that a new Instance of the board is being created every time, hence all the data that the previous board contains is lost.
I've tried copying all the data to a Singleton service and pulling it back, but it seems tedious
So I tried to create a shared component instance and add it at the required views, but it didn't work
app.component.ts
export class AppComponent implements OnInit...{
service ;//Singleton service
constructor(private injector: Injector,private resolver: ComponentFactoryResolver){
const factory = this.resolver.resolveComponentFactory(BoardComponent);
const componentRef = factory.create(this.injector);
this.service.setComponentRef(componentRef);
}
......
}
At a particular view, I've tried inserting the component instance
@Component({
templateUrl: `<ng-template #vwRef></ng-template><br/> <p>User Log</p>.......`,
selector: "supervisor-panel",
styleUrls: ["./supervisor-panel.component.css"],
})
export class SupervisorViewComponent implements OnInit...{
@ViewChild("vwRef",{read: ViewContainerRef})
refTemplate: ViewContainerRef;
constructor(private service : SingletoneService){ }
ngOnInit(){
let componentRef = serivce.getComponentRef();
this.refTemplate.insert(componentRef.hostView);
}
}
this results in an error
ERROR TypeError: Cannot read property '_lView' of undefined at ViewContainerRef.insert (http://localhost:4200/vendor.js:33661:81)
Is this the correct approach or is there an alternate solution ?