通过另一个子项的父项启用子项组件

Question

我的 angular-foundation 项目结构如下： Structur project

如果我想在父项 (menu1) 中显示来自其他子项 (menu1-item) 的子项 (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)
        );
    }


  }


}

问题是将子组件 (menu1-item) 中的变量 "edit_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 组件隐藏和显示有多冷？谢谢非常！！克里斯蒂安·卡潘尼尼

Answer 1

我建议从childmenu1-item发出一个事件（就像你已经做的那样），处理事件 与 parent 和处理程序将 设置变量 edit_item 为 true.

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

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

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

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

menu1.component.html

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

menu1.component.ts

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

通过另一个子项的父项启用子项组件

Enable Child Component trough Parent from Another Child

zurb-foundation

angular

angular5