如何在角度2的另一个组件中导入类？

Question

I am new to Angular 2 and TypeScript and I'm trying to following code in which I want to use the variable of Test class in my another component viz header.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}
export class Test{
static var1:number=10;
}

var1 is static because I want to use it without making test instance.

Code in the another component viz header

import { Component, OnInit } from '@angular/core';
import {Test} from '../app.component';
@Component({
  selector: 'app-header',
  Template;`<h1> Hello</h1>
            <h1>{{Test.var1}}</h1>`
})
export class HeaderComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}

This code showing only hello not "10" which is a static variable.

Thank you in advance.

Answer 1

import { Component, OnInit } from '@angular/core';
import {Test} from '../app.component';
@Component({
  selector: 'app-header',
  Template:`<h1> Hello</h1>
            <h1>{{test.var1}}</h1>`
})
export class HeaderComponent implements OnInit {
  constructor(private test: Test) { }

  ngOnInit() {
  }

}

Mistakes

• use template not Template
• use : not ; after template
• make instance in the constructor

Answer 2

So even though you do not want to instantiate instances of Test, you will still need to use instance properties of your component.

Within your component simply bind the class Test to a an instance property, and access that property in the template.

test = Test;

Access this in the template with:

{{ test.var1 }}

Answer 3

Here is another way:

import { Component, OnInit } from '@angular/core';
import { Test } from './app.component';
@Component({
    selector: 'app-header',
    template: `<h1> Hello</h1><h1>{{var1}}</h1>`
})
export class HeaderComponent implements OnInit {
    var1 = Test.var1; // place static var into local var
    ngOnInit() {
    }
}

Answer 4

You had set the variable as public. you have initialized Test as a private property. Hence it's scope is just inside the component and not on the template.

Answer 5

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'] 
})

export class AppComponent {
}

@Injectable()
export class Test{
  static var1:number = 10;
}


import {Test} from '../app.component';
@Component({
  selector: 'app-header',
  Template;`<h1> Hello</h1>
  <h1>{{Test.var1}}</h1>`
})

export class HeaderComponent implements OnInit {
   constructor(test:Test) { }
   ngOnInit() {
   }
}

Here using @Injectable() decorator before test class, And use the Test in providers[] of app.module.ts , I hope it works..