從同級組件

Question

更改組件的公共變量我有一個從我app.component設置兩個兄弟組件：

<my-a></my-a> 
<my-b></my-b> 

的<my-a>這種可見性是由公共變量在它的成分控制：

@Component({ 
    moduleId: module.id, 
    selector: 'my-a', 
    templateUrl: `<div *ngIf="visible">Hello World</div>` 
}) 

export class MyAComponent { 
    public visible = false; 
} 

我想改變visible的值<my-b>後點擊一個元素：

@Component({ 
    moduleId: module.id, 
    selector: 'my-b', 
    templateUrl: `<div (click)="onClick()">Click Me</div>` 
}) 

export class MyBComponent { 
    onClick() { 
     // stuff here 
    } 
} 

如何設置visible = true在<my-a>從<my-b>？這應該是在父母app.component的邏輯？

編輯

感謝您的答案。我實現了jQuery中的幾行代碼的正常工作的東西：

@Component({ 
    moduleId: module.id, 
    selector: 'my-b', 
    templateUrl: `<div (click)="onClick('my-a')"></div>` 
}) 

export class MyBComponent { 
    onClick(element) { 
     $(element).show(); // or hide() or toggle() or whatever 
    } 
} 

使用jQuery使它易於擴展，如果我們希望有更多的元素，而不是增加發射器和輸入到每一個部件。

我只是擔心在Angular2中使用jQuery是不好的做法？

Answer 1

有幾種方法可以做到這一點。 IMO simpliest將使用EventEmitter和Input。

成分：

@Component({ 
    moduleId: module.id, 
    selector: 'my-a', 
    templateUrl: `<div *ngIf="visible">Hello World</div>` 
}) 

export class MyAComponent { 
    // listen for variable passed by parent 
    @Input() visible; 
} 

組分B：

@Component({ 
    moduleId: module.id, 
    selector: 'my-b', 
    templateUrl: `<div (click)="onClick()">Click Me</div>` 
}) 

export class MyBComponent { 
    // creating EventEmitter to emit when onClick is called 
    @Output() visible = new EventEmitter(); 
    onClick() { 
     this.visible.emit(); 
    } 
} 

而且在父組件：

@Component({ 
    moduleId: module.id, 
    selector: 'parent', 
    // passing variable visible to MyAComponent and listening for (onClick) from MyBComponent 
    templateUrl: `<my-a [visible]="visible"></my-a> 
       <my-b (onClick)="changeVisible()"></my-b>` 
}) 

export class ParentComponent{ 
    private visible: boolean = false; 
    // when MyBComponent emits event change visible value (which is then passed to MyAComponent) 
    changeVisible() { 
    if (this.visible === false) { 
    this.visible = true; 
    } else { 
     this.visible = false; 
     }  
    } 
} 

在更先進的情況下，你應該使用雖然共享服務。

Answer 2

邏輯分爲三部分，但是，它圍繞着父app.component。您將其視爲具體任務：

1. 需要訪問外部來源以更改可見性。您將使用輸入屬性來執行此操作
2. 有一個按鈕，此按鈕的目的是在不同的組件上觸發某個操作。所以它應該有一個Output屬性（這是一個EventEmitter）
3. 父對象然後可以綁定到'Output'來設置一個綁定到Input的變量。在MyAComponent

   import { Component, Input } from '@angular/core'; 
   @Component({ 
       moduleId: module.id, 
       selector: 'my-a', 
       template: `<div *ngIf="visible">Hello World</div>` 
   }) 
   export class MyAComponent { 
       @Input() visible: boolean = false; 
   } 
   

   該父組件將使用要設置的HTML

輸入屬性，這將是：在MyBComponent

import { Component, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'my-b', 
    template: `<div (click)="onClick()">Click Me</div>` 
}) 
export class MyBComponent { 
    @Output() makeVisible: EventEmitter<void> = new EventEmitter<void>(); 

    onClick() { 
     this.makeVisible.emit(); 
    } 
} 

的

<my-a [visible]="aVisibility"></my-a> 

輸出屬性想要偵聽的父組件的HTML十去其變化會是這樣：

<my-b (makeVisible)="makeAVisible()"></myb> 

使用父母綁在一起，它

import { component } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: my-app, 
    template: ` 
     <my-a [visible]="aVisibility"></my-a> 
     <my-b (makeVisible)="makeAVisible()"></myb> 
    ` 
}) 
export class MyApp { 
    private aVisibility:boolean = false; 

    makeAVisible() : void { 
     this.aVisibility = true; 
    } 
} 

注

這是所有未經測試的代碼，所以可能錯別字和錯誤。另外，如果兩個組件之間的通信比較複雜，那麼您應該更喜歡在兩者之間共享一個服務，但對於這樣簡單的事情，我認爲通過父服務是可以的。