Question

你好亲爱的怪人我有一个angular2的问题：我正在开发angular2

中的应用程序

(menuComponent, menuView.html)
(listProductComponent, listProductView.html)
(detailProductComponent, detailProductView.html)

我在menuView.html中有一个按钮，用于添加像这样的新产品

<ul class="nav nav-tabs">
    <li><a class="active" [routerLink]="['ListeProduct']">Product</a></li>
    <li><a [routerLink]="['ListeArticle']">Articles</a></li>
    <li><a [routerLink]="['ListeClients']">Clients</a></li>   
</ul>
<button  type="button" (click)="Add()" class="btn btn-primary    ajouter">Add</button>`

我的listProductView.html是：

<table class="table table-striped">
     <thead>
      <tr>
        <th>Code Product</th>
        <th>Product Name</th>
        <th>Cost</th>
    </tr>
</thead>
    <tr *ngFor="#product of products" >
        <td>{{product.code}}</td>
        <td>{{product.name}}</td>
        <td>{{product.cost}}</td>
    </tr>   
</table> `

当我点击listProduct的一个产品以查看detailProductView.html中的产品详情时，我需要隐藏按钮添加menuView.html。

Answer 1

我认为您可以利用EventEmitter属性的共享服务。一个组件将基于它发出事件，并且将通过订阅EventEmitter来通知该另一个组件。收到事件后，此组件可以设置用于显示/隐藏按钮的属性...

共享服务
```
@Injectable()
export class MenuService {
  addButtonEvent: EventEmitter = new EventEmitter();
}
```
不要忘记在boostrap函数中定义相应的提供程序，以便能够为整个应用程序共享相同的服务实例：`bootstrap（App，[MenuService]）;

MenuComponent组件

@Component({ ... })
export class MenuComponent {
  showAdd: boolean = false;
  constructor(menuService: MenuService) {
    menuService.addButtonEvent.subscribe(
      (showAdd) => {
        this.showAdd = !this.showAdd;
      }
   );
 }

}

ProductListComponent组件：

export class ProductListComponent {
  constructor(private service: MenuService) {
  }

  toggleAddButton():void {
    this.addButton = this.addButton;
    this.service.addButtonEvent.emit(this.addButton);
  }
}

有关此方法实施的更多详细信息，请参阅此问题：

隐藏另一个视图angular2的按钮

1 个答案: