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。

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

Answer 2

我认为你需要在子路线的第一个位置移动path: '', redirectTo: 'achievment' ...路线，否则在路线匹配后

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

路由器将另外匹配

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

将pathMatch: 'full'添加到

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

也应该有用。

未捕获（承诺）：错误：无法找到加载'AchivementComponent'的主要插座

2 个答案: