Question

我试图将组件声明分开。我创建了一个名为＆＃34; Components.ts＆＃34;的新文件。我在那里写了声明代码，我正在导出它。

import { NgModule } from '@angular/core';
import { Component1} from '../components/Component1.component';
import { Component2} from '../components/Component2.component';
import { Component3} from 
'../components/Component3.component';

@NgModule({
  declarations: [
    Component1,
    Component2,
    Component3
  ] 
})

export class Components { }

我正在定义我的＆＃34; App.module.ts＆＃34;文件

import { NgModule } from '@angular/core';
import { Components } from './Misc/Components';//Custom Module


@NgModule({
    declarations: [AppComponent], //This is my main component
    imports: [
       Components  // This is the custom module containg declarations of 
                   // other components
    ],

这是错误：

更新我已经导入了ReactiveForm模块。

如果我定义了＆＃34; App.module.ts＆＃34;中的所有组件，我的项目运行正常。像这样的文件：

declarations: [
    AppComponent,
    Component1,
    Component2,
    Component3
  ];

当我试图分离所有其他组件的声明时出现问题。

Answer 1

您需要导出这些组件，因为您要将其用于其他模块

并且你需要导入ReactiveFormsModule，因为你正在使用formGroup和CommonModule，因为你正在使用ngIf

这样做

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';  
import { NewComponentComponent } from '../components/Component1.component';
import { New2Component } from '../components/Component2.component';
import { ChildComponentComponent } from 
'../components/Component3.component';

@NgModule({
  imports: [ReactiveFormsModule, FormsModule, CommonModule],
  declarations: [
    Component1,
    Component2,
    Component3
  ],
 exports: [
    Component1,
    Component2,
    Component3
  ] 
})

export class Components { }

Answer 2

您需要将declarable类添加到NgModule's声明列表中，而不是文件名。
默认情况下，declarations数组中定义的每个元素都是私有的。使用Exports属性，您只应导出应用程序中其他模块执行其工作所需的任何内容。

 import { NgModule } from '@angular/core';
    import { NewComponentComponent } from '../components/Component1.component';
    import { New2Component } from '../components/Component2.component';
    import { ChildComponentComponent } from 
    '../components/Component3.component';

    @NgModule({
      declarations: [
        NewComponentComponent,
        New2Component,
        ChildComponentComponent
      ],
   exports: [ NewComponentComponent,
              New2Component,
             ChildComponentComponent]
    })

    export class Components { }

模板错误是因为formGroup，您需要在根模块中导入ReactiveFormsModule

    import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    imports: [
        BrowserModule,

        ReactiveFormsModule
    ],

Angular4中的模板解析错误

2 个答案: