Angular - 子组件问题

时间:2018-04-06 19:27:53

标签: angular

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

下拉列表是trackingsystem.component。

我正在尝试在projectheader.component

中嵌套trackingsystem.component

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

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

我已经阅读了许多其他Stack溢出链接中的解决方案。即使错误类似,此问题也不是下面的重复。

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

1 个答案:

答案 0 :(得分:1)

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

    public void AfterTextChanged(IEditable s)
    {

        **lstview**.ItemClick += (e) =>
        {
            Intent intent;
            switch (e.Position)
            {
                case 0:
                    intent = new Intent(this, typeof(NextAC));
                    intent.PutExtra("site's name", data[0]);
                    StartActivity(intent);
                    break;

                case 1:
                    intent = new Intent(this, typeof(NextAC));
                    intent.PutExtra("site's name", data[1]);
                    StartActivity(intent);
                    break;
                case 2:
                    intent = new Intent(this, typeof(NextAC));
                    intent.PutExtra("site's name", data[2]);
                    StartActivity(intent);
                    break;
                case 3:
                    intent = new Intent(this, typeof(NextAC));
                    intent.PutExtra("site's name", data[3]);
                    StartActivity(intent);
                    break;

            }
       }; 
    }