Question

所以我正在使用Angular 6，并且试图从父路径导航到子路径。导航成功，但是在渲染子组件时出现了不需要的页面刷新。换句话说，导航有效，但它也无故刷新页面。这是我的代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/background"
    tools:context="com.markus.tssproject.MainActivity">

    <RelativeLayout
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="110dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:columnCount="3"
            android:rowCount="1">

            <Button
                android:id="@+id/id0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:layout_columnWeight="1"
                android:layout_gravity="fill"
                android:layout_marginRight="3dp"
                android:layout_row="0"
                android:layout_rowWeight="1"
                android:padding="30dp"
                android:tag="0"
                android:text="test tested testing"
                android:textSize="20sp" />

            <Button
                android:id="@+id/open1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="3dp"
                android:layout_column="1"
                android:layout_columnWeight="1"
                android:layout_gravity="fill"
                android:layout_row="0"
                android:layout_rowWeight="1"
                android:padding="30dp"
                android:tag="1"
                android:text="test tested testing"
                android:texSize="20sp" />

            <Button
                android:id="@+id/open2"
                android:layout_width="wrap_content"
                android:layout_column="2"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_gravity="fill"
                android:layout_row="0"
                android:layout_rowWeight="1"
                android:padding="30dp"
                android:tag="2"
                android:text="teste tested testing"/>

        </GridLayout>
    </RelativeLayout>
</LinearLayout>

我的父组件如下所示：

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;

   }
}

就像我说的那样，导航是成功的，但是我想要摆脱不必要的页面刷新，但是我一直找不到合适的解决方案。我真的不知道是什么原因造成的。我是Angular 6的新手。

预先感谢您的回答。

编辑：添加了父组件html

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

Answer 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>

此更新不再刷新。

谢谢大家的帮助。

Answer 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
];

Answer 3

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

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

Answer 4

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

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

Answer 5

在我的情况下，“ href”是问题所在。使用routerLink解决了该问题。

问题解决方法：

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

解决方案：

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

Angular 6-导航到子路线会刷新整个页面

5 个答案: