[英]Passing a variable between two components without inheritance angular 2
我正在尝试将单个变量从一个组件传递到另一个组件。 它是一个数组,声明如下。
@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)? 先感谢您。
编辑:澄清一下,我不需要在我的第一个组件中显示第二个组件。 因此,在这种情况下,@ input指令似乎不会使我受益。 如果我错了纠正我。
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中进行设置,并将其用于进一步访问Angular 2中的Local storage。
我相信它很有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.