Dart 如何使用RouterHook保持角省道组件的状态？

在角省道中更改路线时，我试图保持组件的状态。我偶然发现了RouterHook抽象类，它有一个名为canReuse的抽象函数

• 实现RouterHook类是否在更改路由时保留组件的状态和滚动位置

我想在添加组件以获取数据后调用API。但是，如果导航发生在该组件的前后，则应用程序不应再次调用API（状态保留）。讨论AngularDart应用程序的生命周期会很好

@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();
  }
}

@组件(
选择器：“博客列表”，
templateUrl:'blog_listing_component.html'，
样式URL：[
'package:angular_components/css/mdc_web/card/mdc card.scss.css'，
'blog_listing_component.css'，
],
供应商：[
类提供者（博客服务），
],
指令：[
BlogDetails组件，
核心指令，
路由方向，
FixedMaterialTabStripComponent，
材料按钮组件，
物质成分，
材料-羽状组件，
],
)
类BlogListingComponent实现OnInit、RouterHook{
清单类别=[“第1类”、“第2类”、“第3类”]；
字符串类别；
int-currentTabIndex；
整数跳跃；
整数极限；
int blogCount；
列出当前博客分类；
博客；
最终路由器(u路由器),；
最终博客服务(BlogService);；
BlogListingComponent（此.\u blogService，此.\u路由器）；
基态getBlogsState；
bool get isLoading=>getBlogsState是LoadingState；
bool get isError=>getBlogsState是ErrorState；
@凌驾
void ngOnInit（）异步{
currentCategory=类别[0]；
_getBlogsPerCategory（currentCategory）；
blogsservice.blogsBloc.listen（（状态）{
this.getBlogsState=状态；
if（状态为GotBlogsByCategoryState）{
currentBlogsPerCategory=state.blogs；
currentBlogsPerCategory=state.blogs；
}else if（状态为GotMoreBlogsByCategoryState）{
currentBlogsPerCategory.clear（）；
currentBlogsPerCategory.addAll（state.blogs）；
}
});
}
@凌驾
void ngondstroy（）异步{
_blogService.dispose（）；
}
在TabChange之前作废（TabChangeEvent事件）{
跳过=0；
限值=9；
currentBlogsPerCategory.clear（）；
currentTabIndex=event.newIndex；
currentCategory=类别[event.newIndex]；
currentBlogsPerCategory=null；
_getBlogsByCategory（类别[event.newIndex]，跳过，限制）；
}
无效onNextPagePressed（整版）{
跳过=（第1页）*9；
极限=跳过+9；
_getMoreBlogsByCategory（当前类别、跳过、限制）；
}
作废onBlogDetailsPressed（博客）{
BlogService.currentBlog=blog；
goToBlogDetails（）；
}
未来的goToBlogDetails（）{
_router.navigate（routePath.blogDetails.toUrl（））；
}
@凌驾
Future canActivate（对象组件实例、RouterState oldState、RouterState newState）{
//TODO:实现canActivate
抛出未实现的错误（）；
}
@凌驾
Future canDeactivate（对象组件状态、RouterState oldState、RouterState newState）{
//TODO:实现canDeactivate
抛出未实现的错误（）；
}
@凌驾
未来canNavigate（）{
//TODO:执行canNavigate
抛出未实现的错误（）；
}
@凌驾
将来可以异步重用（对象组件实例、RouterState oldState、RouterState newState）{
返回true；
}
@凌驾
未来导航参数（字符串路径、导航参数）{
//TODO:实现导航参数
抛出未实现的错误（）；
}
@凌驾
未来导航路径（字符串路径、导航参数）{
//TODO:实现导航路径
抛出未实现的错误（）；
}
}

路由书

不应由组件路由实现，而应由

路由器

注入查找

类MyHook实现RouterHook{}
@发电机注入器([
路由器供应商，
提供者（RouterHook，useClass:MyHook）
])
const providers=ng.providers$Injector；
runApp（MyAppComponent，提供者）；

但是，对于您的用例，使用

CanReuse

mixin更简单

class BlogListingComponent与CanReuse实现OnInit{}

或

类BlogListingComponent实现OnInit，可以重用{
@凌驾
未来可重用（RouterState oldState、RouterState newState）异步{
返回true；
}
}

我更新了我的评论，

bootstrap

来自我看到的旧版本。但这并不是保护国家。这意味着，如果我导航到一个新组件并返回到上一个组件（假设它包含一个我已向其中插入值的输入），则不会保留输入的先前插入值。