0

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

app.com.html

<app-nav></app-nav>

<router-outlet></router-outlet>

面筋.com.ts

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

面筋.com.ts

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

面筋服务.ts

glutenRecipeSelected = new EventEmitter<Recipe>();


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


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

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

面筋-list.com.html

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

面筋-list.com.ts

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

  constructor(private glutenService: GlutenService) { }

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

面筋-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>

面筋-item.com.ts

export class GlutenItemComponent implements OnInit {
  @Input() glutenitem:Recipe;
  @Input() glutenindex:number;

面筋-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);
    
          }
  

          );
          } 
    }

应用程序路由.module.ts

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

0 回答 0