切换到子组件时如何隐藏父组件

Question

启动应用程序时，显示了“ AppComponent”组件。通过它，使用AuthGuard转到或不转到模块路由：GalleryModule。我的问题是，当我越过子路径GalleryAddComponent或GalleryItemComponent到GalleryComponent时，父亲GalleryComponent没有隐藏，并且子组件显示在下面。并且我需要在孩子GalleryAddComponent和GalleryItemComponent的过渡期间，我父亲要隐藏GalleryComponent。如何实现？

我的项目结构：

AppRoutingModule：

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'app-root'
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports: [RouterModule],
})

GalleryRoutingModule：

const galleryRoutes: Routes = [
    {
        path: 'gallery',
        canActivate: [AuthGuard],
        component: GalleryComponent,
        children: [
            {path: 'gallery-add', component: GalleryAddComponent},
            {path: 'galleryItem/:id', component: GalleryItemComponent},
        ]
    },
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(galleryRoutes)
    ],
    exports: [RouterModule],
    declarations: []
})

GalleryComponent模板：

 <div class="header">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <h1>{{gallery}}</h1>
                <div class="create-post">
                    <a routerLink="gallery-add" class="btn btn-outline-success tog" >
                        Add New Post
                    </a>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection">
            <a [routerLink]="['galleryItem', pic.id]">
                <img [src]="pic.url" alt="test" class="img-responsive">
                <p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p>
            </a>
            <div class="card buttons">
                <a class="btn btn-danger del" (click)="removePost(pic.id)">Delete</a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
        </div>
    </div>
    <router-outlet></router-outlet>

Answer 1

因此，您必须从 GalleryRoutingModule 中删除子路由。还有来自Gallery组件的 router-outlet 。并且需要在 GalleryRoutingModule

中使路由正常（无嵌套/子路由）

Answer 2

问题在于<router-outlet></router-outlet>的位置。它不应该在gallery.component.html中。如果app.component.html中有<router-outlet></router-outlet>，则它将处理路由。

简而言之，只需删除<router-outlet></router-outlet>

替代

如果您遇到与AuthGuard有关的问题。创建一个新的组件来处理图库的路由。

遵循这些步骤

  

  
1. 为Gallary创建主要组件
  

gallery-main.component.html

<router-outlet></router-outlet>

gallery-main.component.ts

@Component
Class GalleryMainComponent{

}

  

  
1. 更改路由-
  

const galleryRoutes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        component: GalleryMainComponent,
        children: [
            {path: 'gallery', component: GalleryComponent},
            {path: 'gallery-add', component: GalleryAddComponent},
            {path: 'galleryItem/:id', component: GalleryItemComponent},
        ]
    },
];

注意：不要忘记从<router-outlet></router-outlet>删除gallery.component.html

Answer 3

服务：

public navigation = new Subject<any>();
public navigation$ = this.navigation.asObservable();

在GalleryAddComponent和GalleryItemComponent中，您可以使用服务创建一个可观察到的发射。

this.service.navigation.next(true);

在Gallery Component中，您可以订阅以侦听更改。

public displayGalleryContent = true;
this.service.navigation$.subscribe((isreached)=>{
  if(isreached){
     this.displayGalleryContent = true;
  }
});

模板：

<div *ngIf="displayGalleryContent"></div>