angular - Angular5 组件不适用于自定义模块（添加时会导致页面挂起）

Question

我已将以下组件导入到 admin.module.ts 并且它们工作正常：

ManageSpecialistsComponent
ManageSpecialistComponent

奇怪的是，当我尝试将 ReactiveModelFormComponent 添加到 admin.module.ts 时它不起作用。但是，当它添加到 app.module.ts 时，它可以正常工作。当我将其他新组件添加到 admin.module.ts 模块时，它们会起作用。我想也许我需要为 admin.module.ts 中的 ReactiveModelFormComponent 导入 ReactiveFormsModule 但仅添加此模块也会导致页面挂起。

我究竟做错了什么？我要做的就是让 ReactiveModelFormComponent 在 admin.module.ts 中工作以在页面中使用。

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { RouterModule, Routes } from '@angular/router';
    import { HttpClientModule } from '@angular/common/http';
    import 'rxjs/Rx';

    import { AppComponent } from './app.component';
    import { LoginComponent } from './home/login.component';

    //base pages
    import { AboutComponent } from './pages/base/about/about.component';


    import { HomeComponent } from './pages/base/home/home.component';

    /* Feature Modules */
    import { UserModule } from './user/user.module';
    import { ExpenseModule } from './expense/expense.module';

    import { AdminModule } from './pages/admin/admin.module';


    /* common Modules */
    import { ToastrService } from './common/toastr.service';
    import { NavBarComponent } from './nav-bar/nav-bar.component';

    //for testing remove if not working
    //import { ReactiveModelFormComponent } from './reactive-model-form/reactive-model-form.component';
    //import { TestComponent } from './test/test.component';



    const appRoutes: Routes = [
      { path: 'login', component: LoginComponent},
      { path: 'about', component: AboutComponent},
      //{ path: 'form', component: ReactiveModelFormComponent},
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: '**', redirectTo: 'login', pathMatch: 'full' }
    ];


    @NgModule({
      imports: [
        AdminModule,
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HttpClientModule,
        UserModule,
        ExpenseModule,
        RouterModule.forRoot(
          appRoutes
        )
      ],
      declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        AboutComponent,
        NavBarComponent

        //SpecialistZipComponent
      ],
      exports: [],
      bootstrap: [AppComponent],
      providers: [ToastrService]
    })
    export class AppModule { }

admin.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';


import { AuthGuard } from '../../user/auth-guard.service';
import { AuthService } from '../..//user/auth.service';


import { ManageSpecialistComponent } from './manage-specialist/manage-specialist.component';
import { ManageSpecialistsComponent } from 'app/pages/admin/manage-specialists/manage-specialists.component';


import { AdminService } from './admin.service';
//may have to remove this service
import { SpecialistsSearchService } from './manage-specialists/specialists-search.service';



//this component does not work
import { ReactiveModelFormComponent } from '../../reactive-model-form/reactive-model-form.component';
//import { ReactiveFormsModule } from '@angular/forms';
import { Test2Component } from './test2/test2.component';

//try fix from stackoverflow for ReactiveModelFormComponent
import { CommonModule } from '@angular/common';




@NgModule({
  imports: [
    BrowserModule, CommonModule,
    RouterModule.forChild([
      //{ path: 'admin', component: Test2Component },
      { path: 'admin/manage-specialist/:id', component: ManageSpecialistComponent },

      { path: 'admin/manage-specialists', canActivate: [ AuthGuard], component: ManageSpecialistsComponent }
    ])
  ],
  declarations: [
    ManageSpecialistComponent,
    ManageSpecialistsComponent, ReactiveModelFormComponent
  ],
  //exports may need to be removed.. just a test
  exports: [
    ReactiveModelFormComponent
  ],
  providers: [

    AuthService,
    AuthGuard,
    AdminService,
    SpecialistsSearchService

  ]
})
export class AdminModule {}

反应模型form.component.html（根据要求）

<input type="search"
       class="form-control"
       placeholder="Please enter search term"
       [formControl]="searchField">
<hr/>
<ul>
  <li *ngFor="let search of searches">{{ search }}</li>
</ul>

反应模型form.component.ts

import {
  NgModule,
  Component,
  OnInit
} from '@angular/core';
import {
  ReactiveFormsModule,
  FormControl
} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import 'rxjs/Rx';

@Component({
  selector: 'app-reactive-model-form',
  templateUrl: './reactive-model-form.component.html',
  styleUrls: ['./reactive-model-form.component.css']
})
export class ReactiveModelFormComponent implements OnInit {

  constructor() { }

  searchField: FormControl;
  searches: string[] = [];

  ngOnInit() {
    this.searchField = new FormControl();
    this.searchField.valueChanges
        .debounceTime(400)
        .distinctUntilChanged()
        .subscribe(term => {
          this.searches.push(term);
          alert(term);
        });
  }
}

标签： angularmodulecomponentsmean-stack

Answer 1

看一下这个：

1. 在 AppModule 中，将特色管理模块移动到导入的底部。
2. BrowserModule只需要在 app.module 中导入一次。对于功能模块，请改为导入CommonModule。资料来源：角度指南：
3. 我认为您还需要将ReactiveFormsModule重新添加到 Admin 模块，因为您的组件需要它才能工作。

管理模块

imports: [
CommonModule, 
FormsModule, 
ReactiveFormsModule,
RouterModule.forChild
 ]

应用模块

imports: [
BrowserModule
etc...
AdminModule

我希望这能解决你的问题，阿德里安！