Question

尝试在Angular项目的主页上显示某些组件时遇到了一些问题。这是我的主页又称为app.component.html的组件：

<nav class="navbar navbar-expand-lg fixed-top ">
  <a class="navbar-brand" href="#">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">  
 <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav mr-4">
      <li class="nav-item">
        <a class="nav-link" data-value="maincomponent" routerLink="main-cmp">Manage Expense</a> </li>
      <li class="nav-item">
        <a class="nav-link" data-value="managecategory" routerLink="manage-category">Manage Category</a> </li>
      <li class="nav-item">
        <a class="nav-link" data-value="newcomponent" routerLink="new-cmp">Login</a> </li>
    </ul>
  </div>
</nav>

<div ng-show="routeParam.page='#'">This is the extra div that only exists on home page. But it's outside the ng-view scope.</div>
<router-outlet></router-outlet>

<footer class="page-footer font-small">
  <hr class="col-md-3" style="margin-top: 0px; margin-bottom: 0px;">
  <div class="footer-copyright text-center py-3">© 2019 Copyright. All rights reserved.
  </div>
</footer>

我的routing.ts：

  const routes: Routes = [
  {
    path: "main-cmp",
    component: MainCmpComponent
  },
  {
    path: "new-cmp",
    component: NewCmpComponent
  },
  {
    path: "manage-category",
    component: ManageCategoryComponent
  }
];

@NgModule({
  imports: [NgbModule, RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我想在所有其他页面上显示导航栏和页脚，但带有伪文本的div仅显示在主页上。但是，这样做后，div也会与导航栏和页脚一起显示在所有其他页面上。

关于仅在首页显示div的任何想法？谢谢！

Answer 1

为什么不将div放在首页中？

或者您可以在routerLink上使用ngIf

// mycomponent.component.ts
class MyComponent {
    constructor(public router: Router) {

    }
}

// mycomponent.component.html
<div *ngIf="router.url === '/some/route'">

</div>

Answer 2

在app.component.html文件中，您只能保留

<router-outlet><router-outlet/>

路由器下的所有页面将由路由器处理程序加载。

我在每个项目中使用的简单示例

<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar" class="active" *ngIf="isLogged">
        <div class="sidebar-header">
            HEADER ... 
        </div>

        <ul class="list-unstyled components">
            <li>
                <a routerLink="/XYZ">
                    <i class="fas fa-cog"></i>XYZ
                </a>
            </li>
        </ul>
    </nav>

    <!-- Page Content  -->
    <div id="content">
        <div [hidden]="!showLoader" style="top: 30%; position: fixed; left: 50%;">
            <img src="/assets/loader.gif">
        </div>
        <router-outlet [hidden]="showLoader"></router-outlet>
    </div>
</div>

Answer 3

在这里我们可能会使用一个想法

backgroundColor

app.component.html

const appRoutes: Routes = [
    {
        path: '',
        component: GuestLayoutComponent, // here we say what is the parent should render below children
        children: [
            {path: 'login', component: LoginComponent, pathMatch: 'full'},
            {path: 'register', component: RegisterComponent, pathMatch: 'full'},
        ]
    },
    {
        path: '',
        component: AuthenticatedLayoutComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'profile',
                component: ProfileComponent,
                pathMatch: 'full',
                data: {
                    permissions: {
                        redirectTo: UNAUTHORIZED_ROUTE
                    }
                },
                canActivate: [NgxPermissionsGuard]
            },
            {
                path: 'dashboard',
                component: DashboardComponent,
                data: {
                    permissions: {
                        redirectTo: UNAUTHORIZED_ROUTE
                    }
                },
                canActivate: [NgxPermissionsGuard]
            },
        ]
    },
    {path: '**', component: PageNotFoundComponent}
];

guest-layout.component.html

<div>
    <router-outlet></router-outlet>
</div>

authenticated-layout.component.html

<div id="guestLayout" class="guest-layout-page-wrapper">
     <app-header></app-header>

     <div class="guest-layout-content-wrapper">
         <router-outlet></router-outlet>
    </div>

    <app-footer></app-footer>
</div>

Answer 4

在您的routing.ts中使用“而不是”。

例如：

{
path: 'main-cmp',
component: MainCmpComponent },

并节省空间：

{ path: 'main-cmp', component: MainCmpComponent },

仅在主页上显示角度的组件

4 个答案: