0

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

“模块'PostModule'声明的意外值'PostList'。请添加@Pipe/@Directive/@Component注解。”

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

post-list.component.ts

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

export class PostList {

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

我正在尝试阅读已经存储在某处的帖子（我正在使用 JSONPlaceholder）。我想在一个页面上显示所有帖子，然后在点击事件中我想导航到该特定帖子的详细信息。这是我的：

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 {}

我的问题是路由。我无法正确设置路线。我为此创建了一个堆栈闪电战。请指出我的错误。我真的很想通过所有最佳实践来学习 Angular。请纠正我。

4

1 回答 1

3

你必须添加@Component到你的班级

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

问题是，由于您的类没有被传递给该组件装饰器，因此将其添加到declarations似乎您向 angular 添加了错误的东西，因为它只需要其中的组件（具有@component）

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

希望这会有所帮助，请随时进一步询问

于 2020-03-22T05:07:05.567 回答