Fatal编程技术网
  • angular/
  • 如何为Angular 6 Cli项目中的第二个根组件定义路由

如何为Angular 6 Cli项目中的第二个根组件定义路由

angular

如何为Angular 6 Cli项目中的第二个根组件定义路由,angular,Angular,有人能告诉我如何在Angular6+angularcli项目中分别定义多个根组件的路由吗 目前，我有两个根组件AppComponent和LoginComponent，我这样做是为了加载它们： index.html <body> <app-root></app-root> <app-login></app-login> </body> 我有两个问题： 如何为第二个根组件定义路由 如何根据路由选择加载任何根组件 示例：

有人能告诉我如何在
Angular6
+
angularcli
项目中分别定义多个
根组件的路由吗

目前，我有两个根组件
AppComponent
和
LoginComponent
，我这样做是为了加载它们：

index.html


<body>
  <app-root></app-root>
  <app-login></app-login>
</body>


我有两个问题：


  • 如何为第二个根组件定义路由
    • 

  • 如何根据路由选择加载任何根组件
    • 
示例：如果我转到
    /login
    或
    /login/conf1
    仅应加载
    LoginComponent
    。对于其他路线
    AppComponent
    
令人惊讶的是，网上没有关于多个根组件的教程，或者至少我找不到
    

    我的两个组件的用例：
    您应该让AppComponent保持原样，并创建另一个组件来处理路由

    
您应该有AppComponent、LoginComponent和另一个组件
    
在app.module.ts中
    

    @ngModule({
   imports: [
     RouterModule.forRoot(routes)
   ]
})

export const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '**',
    component: AnotherOneComponent
  }
];

    
在app.component.html中
    

    <router-outlet></router-outlet>

    
您将需要定义子路由
    

  • 如果要为管线创建子管线，可以执行以下操作：
    

    导出常量路由：路由=[
{路径：'login'，组件：LoginComponent，
儿童：[
{path:'one'，component:SomeComponent}，
{path:'two'，component:SomeOtherComponent}
]
}
];

    • 

  • 如果要根据路由动态加载组件，可以在
    app.component.ts
    文件中插入路由器模块
    • 

    
构造函数（专用路由器：路由器）{}

    
然后在html中：
    

    `
<app-login *ngIf="router.url != '/login' ></app-login>
`

    

    `

    谢谢，但它没有回答问题。我正在尝试创建组件的根目录。像AppComponent1和AppComponent2一样

    /login/conf1

    

    `
<app-login *ngIf="router.url != '/login' ></app-login>
`