2つの別々のアレイを作成するをクリックしますか？

Question

私はcustomer.html持っている：

：私はこのようなボタンを持っているアプリ-Z-grid.htmlで

pinTab(event: any) { 
     this.pinned=!this.pinned; 
     if (this.pinned) { 
      this.pinnedTabs.push(this.title); 
      console.log('if stat',this.pinnedTabs); 
     } 
     else { 
      this.pinnedTabs.splice(this.pinnedTabs.indexOf(this.title), 1); 
      console.log('else state',this.pinnedTabs); 
     } 

：私はこれを持って私のアプリ-Z-グリッドコンポーネントで

<app-z-grid title="Tip korisnika" [restPath]="'customertype'" (fillDetailParent)="reinit($event)"></app-z-grid> 

    <app-z-grid title="Podtip korisnika" [path]='"customerclassification/customerstype.json"' [restPath]="'customerstype'" [isDetail]="'customerstype'" [parentName]="'customertypeCode'" ></app-z-grid> 

を

<button (click) ="pinTab(title)" class="btn btn-block-container mousePointer"> 
     <i class="fa fa-thumb-tack" [hidden]="!pinned" style="color:white!important;"></i> 
     <i class="fa fa-thumb-tack fa-rotate-90" [hidden]="pinned" style="color:white!important;"></i> 
    </button> 

最初のピンをクリックすると配列にプッシュされますが、他のピンをクリックすると別の配列にプッシュします。何が起こったのでしょうか？

Answer 1

コンポーネントは状態を共有しません。各コンポーネント（<app-z-grid>）は、独自の状態とバッキング "コントローラ/クラス"のインスタンスを持っています。コンポーネント間でpinnedTabs配列を共有したい場合は、角チームによるコンポーネントの相互作用料理のブックを参照する必要があります：https://angular.io/docs/ts/latest/cookbook/component-communication.html