Question

我会接受它：

//应用路由模块

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent,
        children: [
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
            },
            {
                path: 'index',
                component: IndexComponent,
            },
            {
                path: 'about',
                component: AboutComponent,
            },
            {
                path: 'contact',
                component: ContactComponent,
            },
            {
                path: 'login',
                component: LoginComponent,
            },
            {
                path: 'register',
                component: RegisterComponent,
            },
            {
                path: "**",
                component: NotfoundComponent
            }               
        ]
    },

];

使用例如......

导航到路线时，在此配置下构建路线

<a [routerLink]="['./login']"> Login </a>

我导航到彼此堆叠的每条路线，是什么导致了这个？

// App Component html

<div class="container-fluid">

    <router-outlet> </router-outlet>

</div>

// Home组件html（缩短版） ###这个地方是导航，我把它做成文具，所以其他所有路线可以加载到它下面登录寄存器联系

//I load children route in here

<div class="row">
    <div class="col-md-12">
        <router-outlet> </router-outlet>
    </div>
</div>



### This is the footer, Also made stationery, so it appears in every other
### route that loads above

<div class="row">
    <div class="col-md-12">
        <footer> </footer>
    </div>
</div>

Answer 1

修正了它。我的配置没有任何问题。我刚刚没有导入反应式表单模块和表单构建器

呼!!!

使用子路由堆叠的Angular4路由问题

1 个答案: