Question

我正在使用Angular 5库，我想导航到当前URL并重新加载（刷新）整个组件而不是页面，我已阅读有关导航到角文档中当前URL的信息。

这就是我需要的：

 /**
 * Define what the router should do if it receives a navigation request to the current URL.
 * By default, the router will ignore this navigation. However, this prevents features such
 * as a "refresh" button. Use this option to configure the behavior when navigating to the
 * current URL. Default is 'ignore'.
 */
onSameUrlNavigation: 'reload' | 'ignore';

现在，我尝试将onSameUrlNavigation属性设置为reload，然后导航到相同的网址，但没有任何事情发生，如下所示：

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['view'], { queryParams: { QueryUUID: selectedId } });

以前有人用过这个，可以帮忙吗？

Answer 1

如果我理解正确，我就是这样做的：

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getMovie(id);
        }
    );
}

或者观看查询参数：

ngOnInit(): void {
    this.route.queryParams.subscribe(param => {
        this.pageTitle = 'Movie List';
        this.getMovies();
    });
}

在ngOnInit中，我注意参数的更改。当参数改变时，我重新检索数据。

由于数据全部绑定，页面＆＃34;刷新＆＃34;使用新检索的数据。

Answer 2

我找到了这种解决方法，因为Angular 5.1中的onSameUrlNavigation属性不是我需要的。

我只需要覆盖shouldReuseRoute，因此如果当前路线和将来路线相等view，则要为我要刷新的组件路线添加例外。

我也可以毫无问题地导航到其他路线，甚至可以从Angular Material sidenav导航。

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
};

更新：

对于那些想要在Angular 5.1中使用新onSameUrlNavigation属性的人，可以参考这个博客：

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Answer 3

就重新加载整个页面而言，普通的<a href="/">Reload Page</a>标签对我来说很好。我尝试使用“ onSameUrlNavigation”功能，但它没有按照我想要的方式重新加载整个页面。

Answer 4

在路由模块中：在每个路线声明中添加以下内容

runGuardsAndResolvers: 'always'

和

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

例如category/:id

，下面的这个部分将在组件下

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });
        this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

对于每个路线更改，例如说category/11和category/12，它将每次调用loadUserDetail函数。

因此，您无需刷新页面即可从服务器获取数据并使用不同的roureParam更新同一路由的dom。

Answer 5

您可以为此使用角度路由器事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <title>Calculator</title>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2">
            <div class="madeby"></div>
            <div class="display">
                <div class="mode">DEG</div>
                <div class="numbers">123x5</div>
                <div class="outcome">615</div>
            </div>
            <div class="buttons">
                <div class="button-class">7</div>
                <div class="button-class">8</div>
                <div class="button-class">9</div>
                <div class="button-class">DEL</div>
                <div class="button-class">4</div>
                <div class="button-class">5</div>
                <div class="button-class">6</div>
                <div class="button-class">/</div>
            </div>
        </div>
        <div class="box3"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    color: white;
    font-family: 'Quicksand', sans-serif;
    background: #3598DB
}
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.box2 {
    display: grid;
    grid-column-start: 2;
    grid-row-start: 3;
}
.display {
    color: black;
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: 3;
    background: white;
}
.mode {
    padding: 0.5em;
}
.buttons {
    text-align: center;
    justify-items: stretch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.buttons:nth-child(4) {
    background-color: red;
}
.numbers {
    font-size: 2em;
    padding: 0.5em;
    text-align: right;
}
.outcome {
    font-size: 1.5em;
    padding: 0.5em;
    text-align: right;
}
.madeby {
    height: 50px;
}

Angular - 导航到当前相同的URL，组件重新加载而不是整个页面

5 个答案: