代码之家 › 专栏 › 技术社区 › iChrome

同时向两个组件施加角度载荷

angular2-routing angular

iChrome · 技术社区 · 7 年前

我有一个应用程序,它使用angular2作为前端部分。有时我会遇到非常奇怪的bug:登录到应用程序后,我同时看到两个组件(登录组件和主组件)。

因此,在上面的屏幕截图中,不应该看到登录功能的输入。

这是所提供页面的html代码。
下面我列出了 app.component.html :

<form name="header" class="form-horizontal" >
<div class="navbar-fixed-top cometflowHeader">
    <label>CometFlow</label>
</div>
</form>

<div class="jumbotron" style="background-color: #fff; border: 3px; border-color: black;">
    <div class="classol-sm-12">
        <router-outlet></router-outlet>
    </div>
</div>

以及路由配置:

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full'},

  // otherwise redirect to home
  {path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes, {useHash: true});

@NgModule({
  imports: [
      ...,
      routing
  ],
  bootstrap: [AppComponent]
})

有人能告诉我应该在哪里寻找问题吗?因为现在我不知道为什么会这样。我在浏览器的控制台中没有看到任何错误。

2 回复 | 直到 7 年前

Roberto ZvjerkoviÄ sabithpocker 7 年前

我相信你的路线是错误的。 HomeComponent 应该是 AppComponent s的孩子,对吗?

我认为应该是这样的:

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        pathMatch: 'full'
      },

      // otherwise redirect to home
      { path: '**', redirectTo: '' }
    ]
  }
];

或者像这样:

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        pathMatch: 'full'
      },
      {
        path: 'login',
        component: LoginComponent
      },
      // otherwise redirect to home
      { path: '**', redirectTo: '' }
    ]
  }
];

你的 <router-outlet></router-outlet> 应该是哪个组件的出口?

iChrome 7 年前

我找到了解决问题的方法 here
简而言之:有一个bug BrowserAnimationsModule .我升级了Angular的版本,之后这个视觉缺陷消失了。

推荐文章

lahsrah · 在何处声明角捕获所有(未找到)路由

7 年前

Mike · 在Angular 4中处理两个URL(矩阵和查询)参数+

7 年前

iChrome · 同时向两个组件施加角度载荷

7 年前

MarcoLe · Angular 5-路由更改url但不导航

7 年前

Chris O'Brien · 角度5个子管线向管线添加括号

7 年前

user1059939 · 是否在子路由中保留路由参数?

7 年前

Sathya V · 路线导航时角度组件属性未重置

7 年前

Sakkeer A · 如何在单击Angular 2中的按钮时实现全屏窗口功能?

7 年前

progman · 在Angular中导航时,第三方库不工作

7 年前

Marco24690 · 角度2向应用程序根组件发射事件

7 年前