时间戳

首页 > 解决方案 > 角父模板`` 显示模板两次

angular - 角父模板`` 显示模板两次

问题描述

我有一个其子级共享的父模板，并且我根据某些条件在 app.component.html 中显示该父模板。

现在我面临的问题是父模板在子组件参考图片上传之前显示两次

在此处输入图像描述

在此处输入图像描述

这是我的代码：

home.component.html

<div class="container register">
  <div class="row">
      <div class="col-md-3 register-left">
          <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>
          <h3>Welcome</h3>
          <p>You are 35 seconds away from earning your own money!</p>
          <input type="submit" name="" value="Login"/><br/>
      </div>
      <div class="col-md-9 register-right">
          <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
              <li class="nav-item">
                  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Employee</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hirer</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hirer</a>
              </li>
          </ul>
           <div class="tab-content" id="myTabContent">
               <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                  <h3 class="register-heading">Add your project</h3>
                  <div class="row register-form">
                    <router-outlet></router-outlet>
                  </div>
               </div>
           </div>
      </div>
 </div>
</div>

家庭路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '../../../helpers/auth.gaurd';
import { Role } from '../../../data/schema/role';
import { HomeComponent } from './home.component';
import { ListProjectCategoryComponent } from '../project-folder/projectCategory/list-project-category/list-project-category.component';
import { CreateProjectCategoryComponent } from '../project-folder/projectCategory/create-project-category/create-project-category.component';
import { DetailsProjectCategoryComponent } from '../project-folder/projectCategory/details-project-category/details-project-category.component';

const routes: Routes = [{ 
  path: 'admin',
   component: HomeComponent ,
   canActivate: [AuthGuard],
data: { roles: [Role.Admin]},
children: [
{ path: 'projectCategory/list', 
component: ListProjectCategoryComponent
},
{ path: 'projectCategory/create', 
component: CreateProjectCategoryComponent
},
{ path: 'projectCategory/details', 
component: DetailsProjectCategoryComponent
}]  }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class HomeRoutingModule { }

app.component.ts

<app-web-header></app-web-header>
 <div *ngIf="isAdminComponent"> 
    <app-home ></app-home> 
</div>
<div *ngIf="!isAdminComponent"> 
<app-user-home></app-user-home>
</div>
<app-web-footer></app-web-footer>

这是

应用程序路由模块.ts

在此处输入图像描述

请检查是否需要任何其他代码来检查问题。

标签： angularangular-componentsangular-routerrouter-outletangular-routerlink

解决方案

你HomeRoutingModule是在告诉 Angular 使用HomeComponent，所以它把它插入到router-outlet同样的地方HomeComponent。删除admin路线并仅设置子路线，您应该一切顺利。

推荐阅读