角度 9 'No provided for ActivatedRoute'

Question

我是 Angular 9 的初学者。我正在按照在线视频教程练习 angular，但是我的代码（与教程相同）有问题，我不知道不知道要弄清楚。实际上，教程将路由的东西都放在 app.module.ts 中，但我使用 app-routing.module.ts 来分离关注点。当我启动 'ng serve --open' 时，页面仍然空白并出现以下错误：

core.js:6185 ERROR NullInjectorError: R3InjectorError(AppModule)[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]: 
  NullInjectorError: No provider for ActivatedRoute!
    at NullInjector.get (http://localhost:4200/vendor.js:16926:27)
    at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
    at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
    at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
    at NgModuleRef.get (http://localhost:4200/vendor.js:47971:33)
    at Object.get (http://localhost:4200/vendor.js:45804:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:20704:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:34541:12)
    at NodeInjectorFactory.BookComponent_Factory [as factory] (http://localhost:4200/main.js:733:153)
    at getNodeInjectable (http://localhost:4200/vendor.js:20849:44)

实际上我遇到这个问题是因为我使用了提供商。很难理解吗，因为控制台没有给出任何 class 行代码。然而，我试图在这里描述有用的 classes 应该通过以下使用它，如果更多 classes 需要，我会这样做：

--app.module.ts--

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookComponent } from './components/book/book.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BooklistComponent } from './components/booklist/booklist.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { TreeComponent } from './components/tree/tree.component';
import { NgInitDirective } from './directive/ng-init/ng-init.directive';

// for angular firebase #https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

// import our service (that uses firebase)
import { CartService } from './services/cart/cart.service'

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    BooklistComponent,
    BookEditComponent,
    TreeComponent,
    NgInitDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase), // have a look in firebase.ts
    AngularFireModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

--应用-routing.module.ts--

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BookComponent } from './components/book/book.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { BooklistComponent } from './components/booklist/booklist.component';


const routes: Routes = [
  { path: 'books/:title',  component: BookComponent},
  { path: 'books/:title/edit', component: BookEditComponent},
  { path: 'books', component: BooklistComponent},
  {
    path: '',
    redirectTo: 'books/',
    pathMatch: 'full'
  }
];

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

--book.component.ts--

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { BookModel } from '../../models/book/book.model';
import { CurrencyPipe } from '@angular/common';

import { ActivatedRoute } from '@Angular/router'
import { CartService } from '../../services/cart/cart.service';

@Component({
  selector: 'book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
  @Input() book: BookModel;
  @Output() addToCart: EventEmitter<BookModel> = new EventEmitter();

  constructor(private route: ActivatedRoute, private cs: CartService) {
    route.params.subscribe(res => {
      this.book = BookModel.find(res['title']);
    });
  }

  ngOnInit(): void {
  }

  sendToCart() {
    this.addToCart.emit(this.book);
    // the following method is added in cart.service.ts
    this.cs.add(this.book);
  }

  // methods
  votesCounter() {
    return this.book.upvotes;
  }
  upvote() {
    return this.book.upvotes++;
  }

}

当我使用 app-routing.module.ts 时，教程 app.module 有很大的不同（其中也包含路由内容）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestore } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { BookComponent } from './components/book/book.component';
import { BookListComponent } from './components/book-list/book-list.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { TreeComponent } from './components/tree/tree.component';
import { NgInitDirective } from './directive/ng-init/ng-init.directive';
import { CartService } from './services/cart/cart.service';

const bookRoutes: Routes = [
  { path: 'books/:title', component: BookComponent },
  { path: 'books/:title/edit', component: BookEditComponent },
  { path: 'books', component: BookListComponent },
  {
    path: '',
    redirectTo: 'books/',
    pathMatch: 'full'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    BookListComponent,
    BookEditComponent,
    TreeComponent,
    NgInitDirective
  ],
  imports: [
    RouterModule.forRoot(bookRoutes),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我尝试了类似问题给出的解决方案，但它不起作用。

Answer 1

您输入错误，

在 book.component.ts

中将 @Angular/router 更改为 @angular/router

角度 9 'No provided for ActivatedRoute'

Angular9 'No provided for ActivatedRoute'

javascript

angular

routes

code-injection

angular2-providers