Angular：如何在新页面上呈现子路由

如何解决Angular：如何在新页面上呈现子路由

我正在学习如何使用 Angular 制作 Web 应用程序，我真的可以使用一些帮助。 我想在新页面上显示我的 gluten-details 组件。使用 id 获取食谱（面筋项目）工作正常，但详细信息与（面筋食谱）项目列表加载在同一页面上。如何在不显示同一页面上的项目列表的情况下自行呈现详细信息？

app.com.html

<app-nav></app-nav>

<router-outlet></router-outlet>

gluten.com.ts

 <app-gluten-list></app-gluten-list> 
 <router-outlet><router-outlet>

gluten.com.ts

    ngOnInit(){
        this.glutenService.glutenRecipeSelected
        .subscribe((gluten:Recipe)=> {
          this.selectedglutenRecipe = gluten;
        });
      }

gluten.service.ts

glutenRecipeSelected = new EventEmitter<Recipe>();


 private gluten:Recipe[] = [
  new Recipe ('','','')
 ];


getglutenRecipes(){
  return this.gluten.slice();
}

getglutenRecipe(index:number){
  return this.gluten[index];
}

gluten-list.com.html

<app-gluten-item
*ngFor="let glutenrecipe of gluten; let i = index;"
[glutenitem]="glutenrecipe"
[glutenindex] = "i"></app-gluten-item>

gluten-list.com.ts

export class glutenListComponent implements OnInit {
  gluten:Recipe[];

  constructor(private glutenService: glutenService) { }

  ngOnInit(){
    this.gluten = this.glutenService.getglutenRecipes();
  }

gluten-item.com.html

<div class="row" >
  <div class="col-xs-12">
      <div class="container-recipes">

      <div class="title-recipes" >
      <h3>
        {{glutenitem.name}}
      </h3>
    </div>

    <div class="img-recipes">
      <img width="200"
       [src]="glutenitem.imagePath"
       alt="Food image">
      </div>

    <div class="description-recipes">
      <p>{{glutenitem.description}}</p>
      <button [routerLink]="[glutenindex]"> See more </button>

    </div>
    </div>
  </div>
</div>

gluten-item.com.ts

export class glutenItemComponent implements OnInit {
  @input() glutenitem:Recipe;
  @input() glutenindex:number;

gluten-details.com.html

<div class="row">
  <div class="col-xs-12">
    <img [src]="gluten.imagePath" alt="{{gluten.name}}" class="img-responsive">
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <h1>{{gluten.name}}</h1>
  </div>
</div>

gluten-details.com.ts

  export class glutenDetailsComponent implements OnInit {
      gluten:Recipe;
      id:number;
    
      constructor( private glutenService:glutenService,private route:ActivatedRoute) { }
    
      ngOnInit(){
        this.route.params
        .subscribe(
          (params:Params) =>{
            this.id = +params['id'];
            this.gluten = this.glutenService.getglutenRecipe(this.id);
    
          }
  

          );
          } 
    }

app-routing.module.ts

const appRoutes:Routes = [
  {path: '',component:CategoriesComponent,pathMatch:'full'},{path: 'categories',redirectTo: ''},{path: 'gluten',component:glutenComponent,children:[
  {path:':id',component:glutenDetailsComponent},]},{path: '**',redirectTo:''}
];