未捕获（承诺）：错误：找不到加载“成就组件”的主要出口

Question

我正在开发一个 Angular2 应用程序，但我被困在路由配置中。我将路由和导航的官方文档闲置并适当地使用它们。它具有松弛的路由结构。

-Login Page
-Home Page
   |-Achievement 
   |-Task

我使用 auth guard 来保护主页路由。在主页中，有一个标题和链接来浏览子组件。目前，如果我点击一个链接，它会加载带有子组件的整个主页， 也给出了这个错误 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AchievementComponent' 我检查了所有内容，它看起来正确，但我无法找出任何原因。

app-routing.module.ts

..
@NgModule({
    imports:[
        RouterModule.forRoot([
            { path: 'login',    component: LoginComponent },
            { path: 'home',     component: HomeComponent, canActivate [LoggedInGuard], 
                children:[
                    { path: 'achievement', component:AchievementComponent },
                    { path: 'task', component:TaskComponent },
                    { path: '', redirectTo:'achievement', pathMatch:'full' }
                ]
            },
            { path: '',         redirectTo:'home', pathMatch:'full' },
        ])
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule { }

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        AngularFireModule.initializeApp(firebaseConfig,firebaseAuthConfig),
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        HomeComponent,
        AchievementComponent,
        TaskComponent,
    ],
    providers: [
        UserService, 
        DataService, 
        LoggedInGuard, 
        StorageService
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

app.component.html 文件仅包含 <router-outlet></router-outlet> 标记。

home.component.html

<div *ngIf="validUser">
    .......
    <nav>
        <a routerLink="achivement" >Achivement</a>
        <a routerLink="task" >Task</a>
    </nav>
    <router-outlet></router-outlet>
</div>

screen shots

谁能给个解决办法

Answer 1

此错误的原因是 home.component.html 文件中的 *ngIf 部分。开头validUser变量为false，验证用户后validUser值改为true。

正因为如此，一开始没有router-outlet来加载子组件，在validUser值更改为true后，如果单击其中一个链接，根组件和子组件都会加载一次。

Answer 2

我认为您需要将path: '', redirectTo: 'achievment' ... 路由移动到子路由中的第一个位置，否则在与路由匹配后

 { path: 'achievement', component:AchievementComponent },

路由器还会匹配

 { path: '', redirectTo:'achievement', pathMatch:'full' }

将pathMatch: 'full' 添加到

 { path: 'achievement', component:AchievementComponent, pathMatch: 'full' },

应该也可以。