[英]Passing a variable between two components without inheritance angular 2
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?
因此,现在我的问题是,有没有办法在不继承的情况下将变量传递给另一个组件,还是有办法覆盖特定的继承变量(如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.
因此,在这种情况下,@ input指令似乎不会使我受益。 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 您也可以通过其他方式设置变量,以便在会话或localstorage中进行设置,并将其用于进一步访问Angular 2中的Local storage。
I believe its useful. 我相信它很有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.