Javascript 角度6-导航到子路径刷新整个页面

所以我使用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;

   }
}

我的子组件如下所示：

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>

导航

正如我所说，导航是成功的，但有一个不必要的页面刷新，我想摆脱，我还没有找到一个工作的解决方案。我真的不知道是什么引起的。我是新手

提前感谢您的回答

编辑：添加了父组件html

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

//满足于此

从

[routerLink]=“['/parent'…]”

url中删除前导的/from。/正在告诉应用程序从应用程序的根目录查找组件路由，而没有前导/将尝试重定向到相对于当前组件的子级

---

另外，请确保已将

添加到parent.component.html，因为子组件将首先尝试在导航中添加到该子组件。如果该选项不可用，则可能会导致新组件从头开始加载完全刷新。

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

请查看此stackblitz：

---

所以我找到了一个可行的解决方案，虽然不是很优雅，但它。。。作品在父组件中，我创建了如下方法：

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>

导航

没有更多的刷新为这一个

---

谢谢大家的帮助。

在我的例子中，“href”是问题所在。使用routerLink解决了这个问题

有问题的方法：

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

解决方案：

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

用户

您在哪个模块中声明了childComponent？我只有一个模块，ParentComponent和childComponent都在主应用程序模块中声明，这不是最佳做法。所有子组件都应该在其父模块中声明。它们的路由应该在父级的routingModule中指定。在app-routing.module中，只有parentModule必须使用loadChildren属性指定。这就是延迟加载如何以有效的方式工作，从而提高渲染速度，不会出现页面重新网格化问题。我将对此进行研究。这是一个非常新的概念，所以欢迎任何和所有的最佳实践技巧。那会更好。是的，我明白你的意思。但我必须为PageNotFoundComponent保留一个。遗憾的是，问题仍然存在。我已经添加了父组件。在那里，通过另一个问题找到了答案：）。嘿，刚刚添加了一个编辑，我认为可能是原因。请告诉我是否成功导航正常，但刷新仍然存在。param3是动态的，从服务器检索，这就是为什么它不出现在父组件中的原因。但是它应该公开定义，以便您可以从模板访问它。