Question

在app.component.html中，我已经设定了一个条件来决定使用哪种模板：

<div *ngIf="_appService.titleName !== 'Login'">
    <router-outlet></router-outlet>
</div>
<div ngIf="_appService.titleName === 'Login'">
    <login></login>
</div>

我尝试在用户登录后将其重定向到应用程序的主页面。为此，我使用了这个：

this._appService.titleName === 'Main page';
this._router.navigate(['/']);

通过使用这个我得到这个错误：

Cannot find primary outlet to load 'MainComponent'

这令我感到不安，因为我以相反的方式执行注销（从主页重定向到登录页面）并且它的工作正常。

我读了一些类似的答案，但到目前为止他们都没有帮助我，因为我不想在我的login.component.html中添加路由器插座标签，因为主页不是子组件登录一个。

我认为我的问题是我应该使用两个路由器插座而不是登录选择器，但我无法让它正常工作......

我的app.routing.ts：

const appRoutes: Routes = [
    {
        path:'login',
        component: LoginComponent
    },
    {
        path: 'main',
        component: MainComponent,
        canActivate: [AuthGuard]
    },
    {
        path:'',
        redirectTo:'/main',
        pathMatch:'full'
    },
    {
        path: '**',
        redirectTo: ''
    }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

Answer 1

请勿在模板中使用this：

<div *ngIf="_appService.titleName !== 'Login'">
    <router-outlet></router-outlet>
</div>
<div ngIf="_appService.titleName === 'Login'">
   <login></login>
</div>

Answer 2

您可以使用命名路由器插座

<div *ngIf="_appService.titleName === 'Login'">
    <router-outlet name="login"></router-outlet>
</div>

和路线

{
    path:'login',
    component: LoginComponent,
    outlet: 'login'
},

有关详细信息，请参阅how to add a secondary route。

Angular2：错误：无法找到要加载的主要插座（登录页面和所有其他页面）

2 个答案: