1

在 中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'

这让我感到不安，因为我在注销的另一种方式（从主页重定向到登录页面）做了完全相同的事情，并且一切正常。

我读了一些类似的答案，但到目前为止没有一个对我有帮助，因为我不想router-outlet在我的页面中添加标签，login.component.html因为主页不是登录页面的子组件。

我认为我的问题是我应该使用两个router-outlets 而不是登录选择器，但我无法让它正常工作。

我的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);
4

2 回答 2

0

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

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

和路线

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

有关详细信息，请参阅如何添加辅助路由。

于 2017-03-25T21:17:13.400 回答
0

不要this在您的模板中使用：

<div *ngIf="_appService.titleName !== 'Login'">
    <router-outlet></router-outlet>
</div>
<div ngIf="_appService.titleName === 'Login'">
   <login></login>
</div>
于 2017-03-25T21:06:01.773 回答