継承を持たない2つのコンポーネント間で変数を渡す2

Question

1つのコンポーネントから別のコンポーネントに1つの変数を渡そうとしています。これは配列であり、次のように宣言されています。

@Component({ 
    selector: 'component1', 
    templateUrl: './component1.component.html', 
    styleUrls: ['./component1.css'], 
}) 
export class Component1 implements OnInit{ 
    ...... 
    columnVars = Object.keys(this.settings.columns); 
    ...... 
} 

私は、私の最初のコンポーネントを設定して、そのような変数を参照するように設定しました。

<table> 
    <thead> 
    <tr> 
     <th>Column</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody *ngFor="let col of columnVars"> 
     <tr> 
     <td>{{settings.columns[col]['title']}}</td> 
     <td>{{settings.columns[col]['description']}}</td> 
     </tr> 
    </tbody> 
</table> 

第二の成分は、このようになりますと、問題の出番です。

@Component({ 
    selector: 'component2', 
    templateUrl: './component2.html', 
    styleUrls: ['./component2.css'] 
}) 

export class Component2 extends Component1 implements OnInit { 

    buttonObjList = { 
    headendsButton: { 
     title: 'Back to headends', 
     route: '/headends', 
    } 
    }; 
} 

私は理にかなってエラー

ERROR in /home/grady/honeybadger-mat/src/app/column-info/column-info.component.ts (9,14): Class 'ColumnInfoComponent' incorrectly extends base class 'IngestViewComponent'. 

    Types of property 'buttonObjList' are incompatible. 
    Type '{ headendsButton: { title: string; route: string; }; }' is not assignable to type '{ columnInfo: { title: string; route: string; }; }'. 
     Property 'columnInfo' is missing in type '{ headendsButton: { title: string; route: string; }; }'. 

を取得します。ですから今私の質問は、継承なしで別のコンポーネントに変数を渡す方法か、buttonObjListのような特定の継承変数をオーバーライドする方法ですか？前もって感謝します。

編集：明確にするために、この第2のコンポーネントを最初のコンポーネントに表示する必要はありません。ですから、@inputディレクティブはこの場合私にとって恩恵を与えません。私が間違っているなら私を訂正してください。

Answer 1

you can Achieve following way. 

First Method:-(Global Variable Set and Get Example) 

Step 1: 
Declare a Global Variable in app.component.ts 

export class AppComponent { 
    public static dataNavigate; 
} 
Step2: 
import a App Component in Your Value Set Component(first.component.ts) 

import {AppComponent} from '../app.component.ts'; 

AppComponent.columnVars = Object.keys(this.settings.columns); 
//Your Value Set here 

Now you can access every component in your app. 
second.component.ts 
import {AppComponent} from './app.component'; 

constructor(){ 
    console.log(AppComponent.columnVars); 
} 



Second Method:-(Common Service) 

Step 1: 
     Create a Service 
dataService.ts 
--------- 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class DataService { 
constructor(){ 

} 
public columnVars:any; 
} 

Step 2: 
Import app.module.ts file 

import {DataService} from './data.service'; 

providers:[DataService] 

Step 3: 
Set the Value to the Common Service Variable 

first.component.ts 
import {DataService} from './data.service'; 

constructor(dataService:DataService){ 
    this.dataService.columnVars="whatever maybe json or object etc.."; 
} 

Step 4: 
Access that you can do same way step3 
second.component.ts 
import {DataService} from './data.service'; 

constructor(dataService:DataService){ 
    console.log(this.dataService.columnVars); 
} 

他の方法は、あなたが、私はその便利信じて、あなたの変数いくつかのセッションまたはのlocalStorageを設定し、さらに訪問のため Local storage in Angular 2

をそれを使用できることも可能です。