我在根文件夹的单独文件中定义了一个组件:
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 ]
})
答案 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';