dart - 如何使用RouterHook保存角 Dart 组件的状态？

我试图在Angular Dart中更改路线时保留组件的状态。我偶然发现了 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();
  }
}

最佳答案

RouterHook不应由组件路由实现，而应注入(inject)以由Router找到。

class MyHook implements RouterHook {}

@GenerateInjector([
  routerProviders,
  Provider(RouterHook, useClass: MyHook)
])
const providers = ng.providers$Injector;

runApp(MyAppComponent, providers);

但是，对于您的用例，使用CanReuse mixin更为简单。

class BlogListingComponent with CanReuse implements OnInit {}

要么

class BlogListingComponent implements OnInit, CanReuse {
  @override
  Future<bool> canReuse(RouterState oldState, RouterState newState) async {
    return true;
  }
}

关于dart - 如何使用RouterHook保存角 Dart 组件的状态？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62576108/