How to preserve state of Component of angular dart using RouterHook? - dart

Question

I am trying to preserve the state of a component upon changing route in Angular Dart. I stumbled upon the RouterHook abstract class which has an abstract function called canReuse.
Does implementing the RouterHook class preserve the state of the component and scroll position upon change of route?
I want to call an API once the component is added to fetch data. Yet, if a navigation occurs forward and back to that component, the app shouldn't call the API again (state preserved). It would be good to have a discussion about the life cycle of AngularDart apps.
#Component(
selector: 'blog-listing',
templateUrl: 'blog_listing_component.html',
styleUrls: [
'package:angular_components/css/mdc_web/card/mdc-card.scss.css',
'blog_listing_component.css',
],
providers: [
ClassProvider(BlogService),
],
directives: [
BlogDetailsComponent,
coreDirectives,
routerDirectives,
FixedMaterialTabStripComponent,
MaterialButtonComponent,
MaterialIconComponent,
MaterialSpinnerComponent,
],
)
class BlogListingComponent implements OnInit ,RouterHook{
List<String> categories = ["Category 1","Category 2", "Category 3"];
String currentCategory;
int currentTabIndex;
int skip;
int limit;
int blogCount;
List<Blog> currentBlogsPerCategory;
Blog currentBlog;
final Router _router;
final BlogService _blogService;
BlogListingComponent(this._blogService, this._router);
BaseState getBlogsState;
bool get isLoading => getBlogsState is LoadingState;
bool get isError => getBlogsState is ErrorState;
#override
void ngOnInit() async {
currentCategory = categories[0];
_blogService.getBlogsPerCategory(currentCategory);
BlogService.blogsBloc.listen((state) {
this.getBlogsState = state;
if (state is GotBlogsByCategoryState) {
currentBlogsPerCategory = state.blogs;
currentBlogsPerCategory = state.blogs;
}else if (state is GotMoreBlogsByCategoryState) {
currentBlogsPerCategory.clear();
currentBlogsPerCategory.addAll(state.blogs);
}
});
}
#override
void ngOnDestroy() async {
_blogService.dispose();
}
void onBeforeTabChange(TabChangeEvent event) {
skip = 0;
limit = 9;
currentBlogsPerCategory.clear();
currentTabIndex = event.newIndex;
currentCategory = categories[event.newIndex];
currentBlogsPerCategory = null;
_blogService.getBlogsByCategory(categories[event.newIndex], skip, limit);
}
void onNextPagePressed(int page) {
skip = (page-1) * 9;
limit = skip + 9;
_blogService.getMoreBlogsByCategory(currentCategory, skip, limit);
}
void onBlogDetailsPressed(Blog blog) {
BlogService.currentBlog = blog;
goToBlogDetails();
}
Future<NavigationResult> goToBlogDetails(){
_router.navigate(RoutePaths.blogDetails.toUrl());
}
#override
Future<bool> canActivate(Object componentInstance, RouterState oldState, RouterState newState) {
// TODO: implement canActivate
throw UnimplementedError();
}
#override
Future<bool> canDeactivate(Object componentInstance, RouterState oldState, RouterState newState) {
// TODO: implement canDeactivate
throw UnimplementedError();
}
#override
Future<bool> canNavigate() {
// TODO: implement canNavigate
throw UnimplementedError();
}
#override
Future<bool> canReuse(Object componentInstance, RouterState oldState, RouterState newState) async{
return true;
}
#override
Future<NavigationParams> navigationParams(String path, NavigationParams params) {
// TODO: implement navigationParams
throw UnimplementedError();
}
#override
Future<String> navigationPath(String path, NavigationParams params) {
// TODO: implement navigationPath
throw UnimplementedError();
}
}

Answer 1

RouterHook should no be implemented by the component route and should be injected to be found by the Router.
class MyHook implements RouterHook {}
#GenerateInjector([
routerProviders,
Provider(RouterHook, useClass: MyHook)
])
const providers = ng.providers$Injector;
runApp(MyAppComponent, providers);
However, for your use case, it's simpler to use the CanReuse mixin.
class BlogListingComponent with CanReuse implements OnInit {}
or
class BlogListingComponent implements OnInit, CanReuse {
#override
Future<bool> canReuse(RouterState oldState, RouterState newState) async {
return true;
}
}