Question

我是Angular的新手，现在出现此错误：

app / search-books / search-books.component“'没有导出的成员 “ SearchBooksComponent”。

app.module.ts和app-routing.module.ts中的错误均标记为红色我的app.module.ts看起来像这样：

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SearchBooksComponent } from './search-books/search-books.component';

@NgModule({
  declarations: [
    AppComponent,
    SearchBooksComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MatCardModule,
    MatListModule,
    MatSelectModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

也许这与app-routing.module.ts

有关

这里是：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SearchBooksComponent } from './search-books/search-books.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/search',
    pathMatch: 'full'
  },
  {
    path: 'search',
    component: SearchBooksComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是search-books.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

import { BookService } from '../Services/book.service'

@Component({
  selector: 'app-add-contact',
  templateUrl: './add-contact.component.html'
})

export class AddContactComponent {
  public name: string;
  public type: number;
  public number: number;
  public newContact: FormGroup;

  constructor(
    private bookService: BookService,
    private formBuilder: FormBuilder,
    private location: Location
  ) {
    this.newContact = this.formBuilder.group({
      name: new FormControl(null, Validators.required),
      type: new FormControl(null, Validators.required),
      number: new FormControl(null, Validators.required)
    });
  }

  addContact(): void {
    this.bookService.addContact(this.newContact.value)
      .subscribe(() => this.goBack());
  }
  formControlName = new FormControl('', [
    Validators.required
  ]);

  goBack(): void {
    this.location.back();
  }

}

Answer 1

您的search-books.component.ts

上可能没有export class SearchBooksComponent { }

search-books.component.ts

import { Component } from '@angular/core';;

@Component({
  selector: 'app-search-books',
  templateUrl: './search-books.component.html',
  styleUrls: ['./search-books.component.scss']
})
export class SearchBooksComponent {

  constructor(){ }

}

Answer 2

使用AddContactComponent并导入SearchBooksComponent时，组件名称出错，所以

重命名AddContactComponent => SearchBooksComponent 在search-books.component.ts

中

    import { Component, OnInit, Input } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { Location } from '@angular/common';
    import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

    import { BookService } from '../Services/book.service'

    @Component({
      selector: 'app-add-contact',
      templateUrl: './add-contact.component.html'
    })

    class AddContactComponent {
      public name: string;
      public type: number;
      public number: number;
      public newContact: FormGroup;

      constructor(
        private bookService: BookService,
        private formBuilder: FormBuilder,
        private location: Location
      ) {
        this.newContact = this.formBuilder.group({
          name: new FormControl(null, Validators.required),
          type: new FormControl(null, Validators.required),
          number: new FormControl(null, Validators.required)
        });
      }

      addContact(): void {
        this.bookService.addContact(this.newContact.value)
          .subscribe(() => this.goBack());
      }
      formControlName = new FormControl('', [
        Validators.required
      ]);

      goBack(): void {
        this.location.back();
      }

    }
export default AddContactComponent

在AppModule文件中

import SearchBooksComponent from './search-books/search-books.component';

出现错误时怎么办：“没有导出的成员'SearchBooksComponent'”？

2 个答案: