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

【问题标题】：How to import class in another component in angular 2?如何在角度 2 的另一个组件中导入类？
【发布时间】：2017-04-12 10:27:30
【问题描述】：

我是 Angular 2 和 TypeScript 的新手，我正在尝试遵循我想在我的另一个组件即标题中使用 Test 类的变量的代码。

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 是静态的，因为我想在不制作测试实例的情况下使用它。

另一个组件中的代码，即标题

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() {
  }

}

这段代码只显示 hello 而不是静态变量“10”。

提前谢谢你。

【问题讨论】：

标签： angular typescript

【解决方案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() {
  }

}

错误

使用template 而不是Template
在模板后使用: 而不是;
在构造函数中创建实例

【讨论】：

我将对象 obj 设为 obj = new Test();
obj.var1
在模板中使用但没有显示我 10 作为输出
你试过用constructor(private test: Test) { }吗？
没有。我只是在导出类 HeaderComponent implements OnInit {} 中添加这些语句
请尝试添加答案中所述的内容
我使用这个构造函数（私有测试：Test）{ obj = new Test();但它向我显示一个错误找不到名称'obj'

【解决方案2】：

因此，即使您不想实例化 Test 实例，您仍然需要使用组件的实例属性。

在您的组件中，只需将类 Test 绑定到一个实例属性，并在模板中访问该属性。

test = Test;

在模板中使用：

{{ test.var1 }}

【讨论】：

【解决方案3】：

这是另一种方式：

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() {
    }
}

【讨论】：

这是有效的，但为什么我们不能直接访问它。
请看下面的答案：stackoverflow.com/a/39193573 模板的作用域似乎是组件实例，因此它无法访问全局或静态变量。在我看来，这是一件好事。通常应避免使用全局状态。

【解决方案4】：

您已将变量设置为公开。您已将 Test 初始化为私有属性。因此它的作用域只是在组件内部，而不是在模板上。

【讨论】：

【解决方案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() {
   }
}

这里在测试类之前使用 @Injectable() 装饰器，并使用app.module.ts的providers[]中的Test，我希望它有效..

【讨论】：

obj.var1