Angular 6 - 导航到子路由刷新整个页面答案

【问题标题】：Angular 6 - navigation to child route refreshes whole pageAngular 6 - 导航到子路由刷新整个页面
【发布时间】：2018-08-07 10:35:40
【问题描述】：

所以我正在使用 Angular 6，并尝试从父路由导航到子路由。导航成功，但是在呈现子组件时会出现不需要的页面刷新。换句话说，导航可以正常工作，但它也会无缘无故地刷新页面。这是我的代码：

const appRoutes: Routes = [
    {
        path: "parent/:param1/:param2", component: ParentComponent,
        children: [
            { path: ":param3", component: ChildComponent }
        ]
    },
    { path: "", redirectTo: "/index", pathMatch: "full" },
    { path: "**", redirectTo: "/index" }
];

我的父组件如下所示：

import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "my-parent",
    templateUrl: "./parent.component.html"
})

export class ParentComponent {
    param1: string;
    param2: string;
    loading: boolean;
    tutorials: any[];

constructor(public route: ActivatedRoute) {
    this.loading = true;
    this.param1= this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
    // get data here
    }
}

我的子组件如下所示：

import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "my-child",
    templateUrl: "./child.component.html"
})
export class ChildComponent {
    param1: string;
    param2: string;
    param3: string;
    loading: boolean;
    result: any;

    constructor(public route: ActivatedRoute) {
        this.loading = true;
        this.param1= this.route.snapshot.params.param1;
        this.param2 = this.route.snapshot.params.param2;
        this.param3 = this.route.snapshot.params.param3;

   }
}

现在，我尝试从父组件导航到子组件的方式如下：

<a [routerLink]="['/parent', param1, param2, param3]">             
    <b>Navigate</b>
</a>

正如我所说，导航是成功的，但是我想摆脱不需要的页面刷新，但我无法找到有效的解决方案。我真的不知道是什么原因造成的。我是 Angular 6 的新手。

提前感谢您的回答。

编辑：添加父组件 html

<router-outlet></router-outlet>
<div class="row" *ngIf="route.children.length === 0">
    // content here
</div>

【问题讨论】：

你在哪个模块声明了childComponent？
我只有一个模块，ParentComponent 和 ChildComponent 都在主应用模块中声明
这不是最佳做法。所有子组件都应在其父模块中声明。他们的路由应该在父级的 routingModule 中指定。而在 app-routing.module 中，只有 parentModule 必须使用 loadChildren 属性指定。这就是延迟加载以有效方式工作的方式，从而提高渲染速度并且不会出现页面刷新问题。
我会调查的。对此相当陌生，因此欢迎任何和所有最佳实践提示。
这样会更好

标签： javascript angular typescript

【解决方案1】：

所以我找到了一个可行的解决方案，虽然不是很优雅，但它...有效。在我的父组件中，我创建了一个类似这样的方法：

constructor(public route: ActivatedRoute, private router: Router) {
    this.loading = true;
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
    // get data
}

navigateToChild(param3: string) {
    this.router.navigate([param3], { relativeTo: this.route });
}

在父模板中，我这样做了：

<a (click)="navigateToChild(paramFromServer)">
    <b>Navigate</b>
</a>

这个不再刷新。

感谢大家的帮助。

【讨论】：

【解决方案2】：

const appRoutes: Routes = [
    {
        path: "parent/:param1/:param2", component: ParentComponent,
        children: [
            { path: ":param3", component: ChildComponent }
        ]
    },
  // remove this 2 lines
  // redirect to index thing is not needed
];

【讨论】：

是的，我明白你的意思。不过，我必须为 PageNotFoundComponent 保留一个。
遗憾的是问题仍然存在。

【解决方案3】：

从[routerLink]= "['/parent'...]" url 中删除前导 /。 / 告诉应用程序从应用程序的根目录查找组件路由，而没有前导 / 将尝试重定向到相对于当前组件的子组件。

还要确保您已将<router-outlet> 添加到 parent.component.html，因为这是子组件将首先尝试在导航时添加的位置。如果这不可用，则可能会导致从头开始在新组件中加载完全刷新。

【讨论】：

我已经添加了父组件。在那里，感谢另一个问题：）。
嘿，刚刚添加了一个我认为可能是原因的编辑。
如果成功请告诉我
导航正常，但刷新仍然存在。

【解决方案4】：

您没有在 ParentComponent 中定义 param3。此外，您可能需要更改参数的策略，以便您的 ChildComponent 可以从其父级检索参数。

请检查此堆栈闪电战： https://stackblitz.com/edit/angular-tvhgqu

【讨论】：

param3 是一个动态的，从服务器检索，因此它没有出现在父组件中。
但它应该被公开定义，以便您可以从模板中访问它。

【解决方案5】：

在我的情况下，'href' 是问题所在。使用 routerLink 解决了这个问题。

有问题的方法：

<a href='/dashboard/user-details'>User</a>

解决方案：

<a routerLink='/dashboard/user-details'>User</a>

【讨论】：