Question

我是Angular 2和TypeScript的新手，我正在尝试使用我希望在另一个组件viz标头中使用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”，这是一个静态变量。

提前谢谢。

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

}

错误

使用template而非Template
在模板

:

;

在构造函数中创建实例

Answer 2

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

在组件中，只需将类Test绑定到实例属性，然后在模板中访问该属性即可。

test = Test;

使用以下方法在模板中访问此内容：

{{ test.var1 }}

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

Answer 4

您已将变量设置为公开。您已将Test初始化为私有财产。因此，它的范围只是在组件内部而不是在模板上。

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

在测试课程之前，使用 @Injectable（）装饰器，并使用 app.module.ts 的提供者[] 中的 Test ，我希望它能起作用。

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

5 个答案: