如何正确配置 Angular 中的路由

Question

我正在 Angular 学习路线。我正在学习 Pluralsight 的一些教程。这是相同的 stackblitz。我尝试了一个非常基本的代码来理解路由。但我收到此错误：

"Unexpected value 'PostList' declared by the module 'PostModule'. Please add a @Pipe/@Directive/@Component annotation."

我调试了代码，这是罪魁祸首：

post-list.component.ts

import { PostService } from './post.service';

export class PostList {

  constrcutor(private postservice: PostService) {
    postservice.getAllPosts();
  }
}

我正在尝试读取已存储在某处的 posts（我正在使用 JSONPlaceholder）。我想在一页上显示所有 post，然后在单击事件时我想导航到特定 post 的详细信息。这是我的：

post.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class PostService {
  constructor() {}

  getAllPosts() {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(json => console.log(json))
  }
}

这是我的： post.module.ts

import { NgModule } from '@angular/core';
import { PostDetails } from './post-details.component';
import { PostList } from './post-list.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports:[
    RouterModule.forChild([
      {path: 'posts', component: PostList},
      {path: 'posts/:id', component: PostDetails}
    ])
  ],
  declarations:[PostList, PostDetails]
})
export class PostModule {}

我的问题是路由。我无法正确设置路线。我为此创建了一个 stackblitz。请指出我的错误。我真的很想学习 Angular 的所有最佳实践。请指正。

Answer 1

您必须将 @Component 添加到您的 class

import { PostService } from './post.service';

// added this below ↓
@Component({
  selector: 'whatever',
  templateUrl: './my-template.template.html',
})
export class PostList {

  constrcutor(private postservice: PostService) {
    postservice.getAllPosts();
  }
}

问题是因为你的 class 没有被传递给那个组件装饰器，将它添加到 declarations 似乎你向 angular 添加了错误的东西，因为它只期望那里的组件（有@component）

编辑： 检查了您的 stackblitz 并解决了问题，但出于同样的原因，您在 PostDetails 声明中遇到错误。请找到Component的选项并学习如何正确使用它，您需要为所有实例添加@Component装饰器，并且您必须为其添加选择器和模板（选择器是如何从html，模板就是组件 html），你可以使用 templateUrl 来定位另一个带有 html 的文件，你可以添加样式或 styleUrls 等....

希望对您有所帮助，如有任何疑问，欢迎随时提问

如何正确配置 Angular 中的路由

How to configure routes in Angular properly

angular

angular-routing

angular-routerlink