在没有继承角度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屋！