在没有继承角度2的两个组件之间传递变量 [英] 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',
}
};
}
我收到错误
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之类的特定继承变量?先感谢您.
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.
为澄清起见,我不需要在我的第一个组件中显示第二个组件.因此,在这种情况下,@ input指令似乎不会使我受益.如我错了请纠正我.
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);
}
也可以使用其他方法,您可以在某些会话或本地存储中设置变量并使用它 进一步访问 Angular 2中的本地存储
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
我相信它很有用.
这篇关于在没有继承角度2的两个组件之间传递变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!