如何在Angular2中引用組件？

我在根文件夾中的單獨文件中定義一個組件：如何在Angular2中引用組件？

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 Error: (SystemJS) ReferenceError: SimpleComponent is not defined

這是PLUNK。相關代碼位於src/app.ts中。請注意，SimpleComponent如果在此處未註釋，則會起作用 - 問題是將其移至另一個文件並引用它。

另外，如何「附加」組件到模塊。在角1，我只是做：

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

難道只是一個將其添加到declarations的事，無論在哪裏，該文件位於？

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

來源

2016-09-14 VSO

注意要引用到另一個組件文件的相對路徑。使用./和../以及目錄名稱來演示從當前文件位置找到相關文件的位置。例如，如果你試圖導入內部ComponentA以componentB：

如果這兩個組件文件在同一目錄，在ComponentA您需要：

import { ComponentB } from './componentB';

（./代表「這同一個目錄」）
如果以componentB是ComponentA的父目錄，你需要：

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

（../表示「父目錄」，而../../代表「祖父母目錄」，等等）。
如果以componentB是在哪裏ComponentA所在的子目錄，你需要一提的是目錄名，從當前目錄開始（./）：

import { ComponentB } from './subDirB/componentB';
如果以componentB是哪裏ComponentA位於同級目錄，那麼你需要混爲一談：

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

來源

2016-09-14 04:28:40

你剛剛得到你的路錯了...

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

你app.ts是一個目錄比simplecomponent.component.ts低 - 路徑是相對的。

來源

2016-09-14 03:18:38

如何在Angular2中引用組件？

回答

相關問題