Angular - 子组件问题

Question

我正在尝试创建一个仅包含将在许多其他组件中使用的primeng下拉列表的通用组件。

下拉列表是 trackingsystem.component。

我正在尝试在我的 projectheader.component 中嵌套 trackingsystem.component

当我在同一个文件夹中物理上有两个组件时，它工作正常，但我想将所有这些公共组件移动到一个公共子文件夹。

当子组件位于不同的文件夹中时，我收到错误消息，“如果 'trackingsystem' 是 Angular 组件，则验证它是否是该模块的一部分。”

我已经阅读了许多其他堆栈溢出链接中的解决方案。即使错误相似，此问题也不是以下问题的重复。

If '<selector>' is an Angular component, then verify that it is part of this module

Angular2 RC6: '<component> is not a known element'

trackingsystem.component.ts

import { Component, OnInit } from '@angular/core';
import { TrackingSystem } from '../../_models/index';
import { TrackingSystemService } from '../../_services/index';
import { ToastrService } from 'toastr-ng2';
import { InputTextModule, DataTableModule, ButtonModule, DialogModule, DropdownModule } from 'primeng/primeng';
import { SelectItem } from 'primeng/api';
import { NgModule } from '@angular/core';


@Component({
    templateUrl: './trackingsystem.component.html'
})


@NgModule({
    declarations: [
        TrackingSystemComponent
    ],
exports: [
    TrackingSystemComponent
]})

projectheader.component projecttest 工作正常，它与 projectheader 位于同一文件夹中

<div class="header ui-g-12">
    <h2>
        Create new Project
    </h2>
</div>
<table>
    <tr>Customer:<td></td>some customer name<td></tr>
    <tr>etc:<td></td>rest of fields that should be captured<td></tr>
    <tr><strong>save</strong><td></td><strong>cancel</strong><td></tr>
</table>   
</div>
<trackingsystem></trackingsystem>
<projecttest></projecttest>

projectheader.component 解析到相关字段

import { Component, OnInit, ViewChild, NgModule } from '@angular/core';
import { MenuItem, DataTable, LazyLoadEvent, DropdownModule, ContextMenuModule } from "primeng/primeng";
import { Observable } from 'rxjs/Observable';
import { ProjectHeader } from '../../_models/index';
import { ExcelService } from '../../_services/excel.service'
import { ProjectHeaderService } from '../../_services/index';
import { TrackingSystemComponent } from '../_common/trackingsystem/trackingsystem.component';

class ProjectHeaderinfo implements ProjectHeader {
constructor( list of parameters)}

@Component({
selector: 'projectheader',
templateUrl: './projectheader.component.html',
styleUrls: ['./projectheader.component.css']
})

@NgModule({
imports: [TrackingSystemComponent]})
export class ProjectHeaderComponent implements OnInit { }

app.module.shared.ts 解析到相关字段

import { ProjectHeaderComponent } from './components/dsfluidtest/projectheader.component';
import { ProjectHeaderService } from './_services/index';
import { TrackingSystemComponent } from './components/_common/trackingsystem/trackingsystem.component';
import { TrackingSystemService } from './_services/index';

@NgModule({
declarations: [
    AppComponent,
    ProjectHeaderComponent,
    ProjectTestComponent,
    TrackingSystemComponent              
],
providers: [ProjectHeaderService,  AuthService, TrackingSystemService,
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: RequestOptions, useClass: AppBaseRequestOptions }],
imports: [
  //TrackingSystemComponent, //Also tried leaving this uncommented
DropdownModule, // and other such modules 
    RouterModule.forRoot([
        { path: 'projectheader', component: ProjectHeaderComponent },
        { path: 'projecttest', component: ProjectTestComponent },
         { path: 'trackingsystem', component: TrackingSystemComponent }
    ])
]
})
export class AppModuleShared {}//This is blank in my app

Answer 1

您的主应用程序模块应导入primeng 下拉列表、您的跟踪系统组件和标题，以确保它们在整个应用程序范围内可用。然后你的标题应该只导入你的轨道系统组件，最后你的轨道系统组件应该只导入primeng下拉列表。 当然，所有路径都与导入它们的文件相关，请务必先检查。希望对您有所帮助。 跟踪系统不应该是一个模块，而应该是一个组件。

@Component({
  selector:'tracksystem',
  templateUrl: '<path>'
})
export class TrackSystemComponent {}