Question

我的角度基础项目的结构如下： Structur project

如果我想从其他子（menu1-item）中显示父（menu1）内的show child组件（menu1-item-edit）。我该怎么做？在menu1.component.html中，我使用以下代码设置menu1-item-edit组件：

 <div class="row">
  <app-menu1-item-edit *ngIf="edit_item"></app-menu1-item-edit>
</div>

menu1.component.ts代码是：

import {Component, OnInit, ViewChild} from '@angular/core';
import {Menu1ListaService} from './menu1Lista.service';
import {Menu1Item} from './menu1.model';
import {Menu1ItemEditComponent} from './menu1-item-edit/menu1-item-edit.component';

@Component({
  selector: 'app-menu1',
  templateUrl: './menu1.component.html',
  styleUrls: ['./menu1.component.scss'],
})
export class Menu1Component implements OnInit {

  @ViewChild(Menu1ItemEditComponent ) child : Menu1ItemEditComponent ;

  listaMenu1: Menu1Item[] = null;
  mostratutto: boolean = false;
  boxeslista: string;
  titoloclass: string;
  edit_item: boolean = false;


  constructor(private serverGetMenuLista: Menu1ListaService ) { }


  ngOnInit() {

    this.GetElencoItemMenu1();
  }

  GetElencoItemMenu1() {

    if (!this.mostratutto) {
      this.serverGetMenuLista.getListaVetrina()
        .subscribe(
          (elencoitem: any[]) => this.listaMenu1 = elencoitem.splice(0, 20),
          (error) => console.log(error)
        );

      this.mostratutto = true;

    } else {

      this.mostratutto = false;

      this.serverGetMenuLista.getListaVetrina()
        .subscribe(
          (elencoitem: any[]) => this.listaMenu1 = elencoitem,
          (error) => console.log(error)
        );
    }


  }


}

问题是设置变量＆＃34; edit_item＆＃34;来自子组件（menu1-item）。

menu1-item.component.html的代码是：

<div class="blocco_vetrina_wrap" (click)="visualizzaDettagli(itemmenu1.ID)">
  <img
    [src]="itemmenu1.ImgQuaSmall"
    alt="{{ itemmenu1.Nome }}" title="{{ itemmenu1.Nome }}"
    class="thumbnail">
  <div class="blocco_vetrina_text">
    {{itemmenu1.Nome}}<i class="right"></i>
  </div>
</div>

menu1-item.component.ts的代码是：

import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
import {Menu1Item} from '../menu1.model';
import {Menu1Component} from '../menu1.component';


@Component({
  selector: 'app-menu1-item',
  templateUrl: './menu1-item.component.html',
  styleUrls: ['./menu1-item.component.scss']
})
export class Menu1ItemComponent implements OnInit {

  @Input() itemmenu1: Menu1Item;

  @Output() abilitaEditItem = new EventEmitter<boolean>();


  constructor() { }

  ngOnInit() {
  }

  visualizzaDettagli(ID: number) {
    alert('ID: ' + ID);
    this.abilitaEditItem.next(true);
  }

}

menu1-item-edit.component.html的代码很简单：

<h1>MENU' EDIT TEST</h1>

menu1-item-edit.component.ts是：

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-menu1-item-edit',
  templateUrl: './menu1-item-edit.component.html',
  styleUrls: ['./menu1-item-edit.component.scss']
})
export class Menu1ItemEditComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

我从menu1-item组件中制作隐藏和显示有多冷？谢谢非常！！ Cristian Capannini

Answer 1

我建议从孩子那里发出一个事件 menu1-item（就像你已经做的那样），用父母处理事件，处理程序将将变量 edit_item 设置为true 。

为了处理事件，您必须执行以下操作：

在 menu1-item.component.ts 中更改方法如下：

visualizzaDettagli(id: number) {
    alert('ID: ' + id);
    abilitaEditItem.emit(true);
}

使用此代码，您只需向父级发送一个事件，现在要处理它，您必须在父级中捕获它，如下所示：

<强> menu1.component.html

<app-menu1-item (abilitaEditItem)="handlerMethod($event)">

<强> menu1.component.ts

handlerMethod(enableEditItem: boolean) {
    edit_item = enableEditItem;
}

从另一个子项启用子组件父项

1 个答案: