未捕获(承诺):错误:无法找到加载'AchivementComponent'的主要插座

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>

屏幕截图

谁能给出解决方案呢？

Answer 1

此错误的原因是home.component.html文件中的*ngIf一部分.在开始变量是,验证后用户值更改为.validUserfalsevalidUsertrue

因此,在开始时没有路由器插座来加载子组件,在validUser更改值之后true并且如果单击其中一个链接,则根组件和子组件都被加载一次.