javascript - angular2 路由器导出登录后无法工作

标签 javascript angular angular2-template

当我登录并导航到其他页面或登录时,我收到以下错误:

EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'customComponent'
Error: Cannot find primary outlet to load 'customComponent'

但是当我未登录时,导航可以工作。

我还注意到,如果我删除其中一个路由器 socket ,导航将会正常工作。假设我删除了登录中的路由器导出,user.username 中的导航将正常工作。

怎么会呢? 我怎样才能让它正常工作?如果未登录,则在那里显示路由器 socket ,否则如果我在线,则在其他地方显示它?

代码:

 <div *ngIf="user.username">
   <a routerLink="/murder" routerLinkActive="active">Murder</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>

    <div>
    <router-outlet></router-outlet>
    </div>
</div>
<div *ngIf="loggedin == false">
   <a routerLink="/murder" routerLinkActive="active">Murder</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>

// other things
    <div>
    <router-outlet></router-outlet>
    </div>
</div>

更新:

我在登录时创建了路由器导出:

 <router-outlet name="regular"></router-outlet>

和外部:

        <router-outlet name="aux"></router-outlet>

并改变了我的路线:

   path: 'murder',
              component: MurderComponent,
              outlet: 'regular'

但是当我导航时我得到:

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'murder'

怎么会这样?

完整的代码路由:

 RouterModule.forRoot([

              {
                  path: 'login',
                  component: LoginhandlerComponent,
                  outlet: 'aux'

              },

          {
              path: 'murder',
              component: MurderComponent,
              outlet: 'regular'

          },


          ]

      )

最佳答案

您需要将 socket 添加到您的路由器链路。尝试这样:

<a [routerLink]="['/', {outlets: {'regular': 'murder'}}]" routerLinkActive="active">Murder</a>

关于javascript - angular2 路由器导出登录后无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43937643/

相关文章:

javascript - For循环后的神秘边界框(Javascript)

javascript - Chrome 扩展表单输入文本在提交时为空白

angular - 如何使用angular 2制作动态模态

javascript - 如何使用 angular2 在按钮单击时获取 primeng 下拉列表的选定文本

javascript - 如何计算javascript中一个单词的音节数?

javascript - 调整网络浏览器大小时如何防止调整 div 大小?

javascript - switchMap 返回一项

javascript - 为什么我的 Polymer iron 图标出现在我的导航纸输入下方?

angular - 从客户端以 Angular 5 启用 Access-Control-Allow-Origin

javascript - 具有多个参数的 Angular 2 路由器链接