I'm trying to pass a single variable from one component to another. It is an array and is declared as follows.
@Component({
selector: 'component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.css'],
})
export class Component1 implements OnInit{
......
columnVars = Object.keys(this.settings.columns);
......
}
So I set up my second component to extend my first and reference the variable like so and it works just as expected.
<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>
The second component looks like this and this is where the problem comes in.
@Component({
selector: 'component2',
templateUrl: './component2.html',
styleUrls: ['./component2.css']
})
export class Component2 extends Component1 implements OnInit {
buttonObjList = {
headendsButton: {
title: 'Back to headends',
route: '/headends',
}
};
}
I get the error
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; }; }'.
Which makes sense. So now my question is is there a way to pass a variable to another component without inheritance or a way to override specific inherited variables like buttonObjList? Thank you in advance.
Edit: To clarify I do not need to display this second component in my first component. So it seems the @input directive won't benefit me in this case. Correct me if I'm wrong.
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);
}
other way is also possible you can set your variable some session or localstorage and use it for further visit Local storage in Angular 2
I believe its useful.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.