另一种观点认为angular2的hidding按钮 [英] hidding button of another view angular2

问题描述

您好亲爱的怪胎我有angular2一个问题：
我正在开发中angular2应用

hello dears geek i have a problem with angular2: I'm developing an application in angular2

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

我在menuView.html一个按钮添加新的产品像这样

i have a button in the menuView.html for add new Product like this

<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 。

what I need is when I click on one product of the listProduct to see the product detail in detailProductView.html is to hide the button Add from menuView.html.

推荐答案

我认为，你可以利用带有 EventEmitter 属性共享服务。一个组成部分将发出此基础上，这等组件的活动将通过订阅的 EventEmitter 的通知。当受理了事件，该组件可以设置用于显示/隐藏按钮属性...

I think that you could leverage a shared service with an EventEmitter property. One component will emit an event based on it and this other component will be notified by subscribing the EventEmitter. When the event is received, this component can set a property used to show / hide the button...

• 共享服务

• Shared service

@Injectable()
export class MenuService {
  addButtonEvent: EventEmitter = new EventEmitter();
}

不要忘了来定义自举功能对应的供应商能够共享相同的服务实例，为整个应用程序：`引导程序（App [MenuService]）;

Don't forget to define the corresponding provider in the boostrap function to be able to share the same instance of the service for the whole application: `bootstrap(App, [ MenuService ]);

MenuComponent中组件

@Component({ ... })
export class MenuComponent {
  showAdd: boolean = false;
  constructor(service: 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);
  }
}

请参阅这个问题该办法的实施的更多细节：

See this question for more details of the implementation of this approach:

• Toggle属性从子组件父Component在Angular2（类似$在AngularJS发出）


• Delegation: EventEmitter或可观察到的Angular2

• Toggle property in parent Component from Child Component in Angular2 (similar to $emit in AngularJS)
• Delegation: EventEmitter or Observable in Angular2

这篇关于另一种观点认为angular2的hidding按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！