angular - 当我收到错误消息时出了什么问题：“没有导出的成员 'SearchBooksComponent'”？

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();
  }

}

标签： angularvisual-studio

Answer 1

export class SearchBooksComponent { }您的 search-books.component.ts 上可能没有

搜索书籍.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(){ }

}