在 Angular 2 中如何实现特定路由的 RouteReuseStrategy shouldDetach-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 2 中如何实现特定路由的 RouteReuseStrategy shouldDetach

在 Angular 2 中，RouteReuseStrategy 是一个非常方便的功能，它可以让你决定是否重用页面组件。这个策略非常有用，尤其是当你有一个包含多个步骤的表单或者需要在同一页面上展示不同的数据时。

在默认情况下，Angular 2 会重用所有的路由组件。如果你希望某些路由组件不被重用，则需要自定义 RouteReuseStrategy 的 shouldDetach 方法。下面我们来看看如何实现。

实现 shouldDetach 方法

首先，在你的应用中创建一个名为 CustomReuseStrategy 的类，并继承自 Angular 默认提供的 RouteReuseStrategy 类。然后在这个类中实现 shouldDetach 方法，该方法返回一个布尔值，表示当前路由是否应该被缓存。

------ - ------------------- ------------------- - ---- ------------------

------ ----- ------------------- ------- ------------------ -
    ------------------- -------------------------------------------------- ------- -
        -- ------------
        ------ ---------- -- ------------------------
    -

    ------------ ------------------------------------------------- ------- --------------------- ---- -
        -- --------
        ------------------------------------- - -------
    -
-

在 shouldDetach 方法中，我们判断了当前路由的 data 属性里是否存在 shouldDetach 字段，如果存在就返回 true，表示需要缓存。

注入 CustomReuseStrategy

接下来，我们需要在 AppModule 中将 CustomReuseStrategy 注入到 providers 中，以便 Angular 2 可以使用它。

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------- ------------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- --------------------------

-----------
    -------- -
        --------------
        -------------------------------
    --
    ------------- ---------------
    ---------- ---------------
    ---------- -
        -
            -------- -------------------
            --------- -------------------
        -
    -
--
------ ----- --------- --

在这里，我们将 CustomReuseStrategy 类注入到了 RouteReuseStrategy 的 providers 中，这样 Angular 2 就会使用我们自定义的策略。

在路由中设置 shouldDetach 属性

最后，在路由中添加 data 属性，并设置 shouldDetach 字段为 true 即可启用自定义的 RouteReuseStrategy，让 Angular 2 知道哪些路由组件需要被缓存。

----- ---------- ------ - -
    -
        ----- -------
        ---------- -------------
    --
    -
        ----- --------
        ---------- ---------------
        ----- -
            ------------- ----
        -
    --
    -
        ----- ----------
        ---------- ----------------
    -
--

在上面的示例代码中，我们设置了 AboutComponent 路由的 shouldDetach 属性为 true，意味着该路由组件将被缓存，而其他路由组件则不会被缓存。

总结

通过自定义 RouteReuseStrategy 的 shouldDetach 方法，我们可以让 Angular 2 知道哪些路由组件需要被缓存，从而提高应用的性能和用户体验。在实际开发中，你可以根据具体业务场景来设置 shouldDetach 属性，以达到最佳的效果。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/25562