Question

我正在使用ASP.NET Core中的@angular处理Angular 2应用程序。我有一个位于基本URL的登录页面，它有自己的布局文件，索引页面和控制器。

我要添加的内容是我的网站/ toolkit的整个部分。为了开始它，我使用我的内部布局，索引和控制器在/ toolkit上放置了MyProfileComponent。我还创建了一个位于/ toolkit / profile /：uniquename

的ProfileComponent

问题是，当我在添加内部路由后运行应用程序时，出现错误。

/ toolkit抛出此错误

异常：调用节点模块失败并显示错误：错误：未捕获（在承诺中）：错误：找不到加载'ProfileComponent'的主要插座

错误：找不到加载'ProfileComponent'
的主要插座
at getOutlet（D：\ Projects .. \ node_modules \ @angular \ router \ bundles \ router.umd.js：3018：23）

和/ toolkit / profile / sdfsad会抛出此错误

异常：调用节点模块失败并显示错误：错误：未捕获（在承诺中）：[object Object]

我是角度2的新手，我见过的所有内容都希望你在组件上使用现在绝对的Directives属性，但是在这个版本的角度2中已经消失了（@angular是版本2.0.0）。我可能做错了什么，但这些是件：

_InternalLayout （额外的东西被删除）

<head>
    <base href="/toolkit" />
</head>
<body class="menubar-top menubar-dark theme-primary">
    @RenderBody()

    @RenderSection("scripts", required: false)
</body>

/Toolkit/Index.cshtml

@{
    Layout = "~/Views/Shared/_InternalLayout.cshtml";
}

<app asp-prerender-module="@Url.Content("ClientApp/dist/main-server")">Loading...</app>

<script src="@Url.Content("~/dist/vendor.js")" asp-append-version="true"></script>

@section scripts {
    <script src="@Url.Content("~/dist/main-client.js")" asp-append-version="true"></script>
}

app.component.html

<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: require('./app.component.html'),
})
export class AppComponent {

}

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';

import { AppComponent } from './components/app/app.component'
import { LandingPageLayoutComponent } from './components/landing/landing-page-layout.component';
import { SignInComponent } from './components/account/sign-in.component';
import { RegisterComponent } from './components/account/register.component';
import { ProfileComponent } from './components/profile/profile.component';
import { MyProfileComponent } from './components/profile/my-profile.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        LandingPageLayoutComponent,
        SignInComponent,
        RegisterComponent,
        ProfileComponent,
        MyProfileComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: 'signin', component: SignInComponent },
            { path: 'register', component: RegisterComponent },

            {
                path: 'toolkit',
                component: MyProfileComponent,
                children: [
                    { path: '' },
                    { path: 'profile/:uniquename', component: ProfileComponent },
                ]
            },

            { path: '', component: LandingPageLayoutComponent },
            { path: '**', redirectTo: 'error' }
        ])
    ]
})
export class AppModule {
}

根页面，登录并注册所有工作，但当我尝试登录并在/ account下注册子项时，我遇到了同样的问题。我确定我在做一些愚蠢的事情，一旦我们弄明白，我会尝试用这些页面进行其他嵌套。

修改

如果重要，我正在使用this Visual Studio 2015 template。它工作正常，直到我开始尝试添加嵌套路由。

Answer 1

根据您的错误以及我在app.module.ts中的RouterModule代码中看到的内容，根据您的目标，有两种可能的解决方案。

1）如果在路线＆＃39; / toolkit＆＃39;，您想看到 MyProfileComponent 并且在路线＆＃39; / toolkit / profile /：uniquename＆＃39; （在此处显示完整路径）您希望看到 ProfileComponent 而不是 MyProfileComponent ，那么路由器的代码需要如下所示：

    RouterModule.forRoot([
        { path: 'signin', component: SignInComponent },
        { path: 'register', component: RegisterComponent },
        {
            path: 'toolkit',
            children: [ // change here
                { path: '', component: MyProfileComponent }, // both components are siblings within 'toolkit' path
                { path: 'profile/:uniquename', component: ProfileComponent }
            ]
        },
        { path: '', component: LandingPageLayoutComponent },
        { path: '**', component: ErrorComponent } // this also needs to be changed to match a component
    ])

2）如果在路线＆＃39; toolkit / profile /：uniquename＆＃39;你想看到MyProfileComponent和ProfileComponent 嵌套在里面那么你的路由器代码应该是什么样的

    RouterModule.forRoot([
        { path: 'signin', component: SignInComponent },
        { path: 'register', component: RegisterComponent },

        {
            path: 'toolkit',
            component: MyProfileComponent,
            children: [
                // this line needs to be removed { path: '' },
                { path: 'profile/:uniquename', component: ProfileComponent }
            ]
        },
        { path: '', component: LandingPageLayoutComponent },
        { path: '**', component: ErrorComponent } // this also needs to be changed to match a component
    ])

（2）续&-然后在my-profile.component.ts内，您的template必须有<router-outlet></router-outlet>来处理嵌套的子路线

在这两种情况下，您的path: **'都需要有与之关联的组件。进行重定向时，您必须包含 pathMatch 属性，例如pathMatch: 'full'

Angular 2嵌套路由抛出错误

1 个答案: