如何在Angular2中引用组件?

时间:2016-09-14 03:08:50

标签: angular

我在根文件夹的单独文件中定义了一个组件:

import {Component} from '@angular/core'

@Component({
  selector: 'testtag',
  templateUrl: './simplecomponent.component.html',
})

export class SimpleComponent {

}

然后我尝试导入它,以便主要组件可以像这样使用它:

import {SimpleComponent} from './simplecomponent.component.ts'

然后我收到以下错误:

  

VM360 zone.js:192错误:(SystemJS)ReferenceError:未定义SimpleComponent

这是PLUNK。相关代码在src / app.ts中。注意,如果在此处取消注释,SimpleComponent仍然有效 - 问题是将其移动到另一个文件并引用它。

另外,我如何"附加"模块的组件。在角度1中,我只是做了:

angular.module('myApp').controller(name, function);

是否只需将其添加到declarations,无论文件位于何处?

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ SimpleComponent ],
  bootstrap: [ App ]
})

2 个答案:

答案 0 :(得分:1)

你的路径错了......

import {SimpleComponent} from '../simplecomponent.component.ts'

您的app.ts是一个低于simplecomponent.component.ts的目录 - 路径是相对的。

答案 1 :(得分:1)

注意要在另一个内部引用的组件文件的相对路径。使用./和../和dir名称来演示从当前文件位置查找引用文件的位置。例如,如果您尝试在ComponentA中导入ComponentB:

  • 如果两个组件文件位于同一个目录中,则需要在ComponentA上执行以下操作:

    import { ComponentB } from './componentB';

    (./代表“同一目录”)

  • 如果ComponentB位于ComponentA的父目录中,则需要:

    import { ComponentB } from '../componentB';

    (../代表“父目录”,而../../代表“祖父目录”,依此类推)。

  • 如果ComponentB位于ComponentA所在的子目录中,则需要提及该dir名称,从当前目录(./)开始:

    import { ComponentB } from './subDirB/componentB';

  • 如果ComponentB位于ComponentA所在的兄弟目录中,那么您需要混合:

    import { ComponentB } from '../subDirB/componentB';