Javascript 为什么我的帖子列表组件没有加载？

如问题所述，我的post模块中有一个组件，即PostList。它应该做的是在用户访问网站时立即加载。 其代码如下所示 posts list.component.css

const routes: Routes = [{
  path: 'blog',
  loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule),
},
{ 
  path: '',
  redirectTo: '/blog',
  pathMatch: 'full'
},
{
  path:'dashboard',
  component:PostDashboardComponent
}]

部分{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格模板行：自动；
栅隙：10px；
保证金：0自动；
最大宽度：90%；
}
垫卡{
利润率：10px0；
}

post list.component.html

{{post.title}

由{{post.author}}&bull发布；在{post.published | date:“fullDate”}

删去

发布列表.component.ts

const routes: Routes = [{
  path: 'blog',
  loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule),
},
{ 
  path: '',
  redirectTo: '/blog',
  pathMatch: 'full'
},
{
  path:'dashboard',
  component:PostDashboardComponent
}]

从'@angular/core'导入{Component，OnInit}
从'rxjs/Observable'导入{Observable}
从“../posts.service”导入{PostService}
从“../Post”导入{Post}
从“../../core/auth.service”导入{AuthService}
@组成部分({
选择器：“应用程序发布列表”，
templateUrl:'./post list.component.html'，
样式URL:['./post list.component.css']
})
导出类PostListComponent实现OnInit{
职位：可观察
构造函数（私有postService:postService，公共auth:AuthService）{}
恩戈尼尼特（）{
this.posts=this.postService.getPosts（）
}
删除（id:string）{
this.postService.delete（id）
}
}

因为它在一个模块内，所以我将它路由到post.module.ts中的/blog打开

const routes: Routes = [{
  path: 'blog',
  loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule),
},
{ 
  path: '',
  redirectTo: '/blog',
  pathMatch: 'full'
},
{
  path:'dashboard',
  component:PostDashboardComponent
}]

const routes:routes=[
{路径：'blog'，组件：PostListComponent}，
{path:'blog/：id'，component:PostDetailComponent}，
{路径：'dashboard'，组件：PostDashboardComponent}
]

我不明白为什么它没有显示在网站上

在app.module.ts中

const routes: Routes = [
  { path: '', redirectTo: '/blog', pathMatch: 'full'},
  { path: '', loadChildren: './posts/posts.module#PostsModule' },

]

posts.service.ts

import { Injectable } from '@angular/core'
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument
} from '@angular/fire/firestore'
import { Post } from './post'
import 'rxjs/add/operator/map'


@Injectable()
export class PostService {
  postsCollection: AngularFirestoreCollection<Post>
  postDoc: AngularFirestoreDocument<Post>

  constructor(private afs: AngularFirestore) {
    this.postsCollection = this.afs.collection('posts', ref =>
      ref.orderBy('published', 'desc')
    )
  }

  getPosts() {
    return this.postsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Post
        const id = a.payload.doc.id
        return { id, ...data }
      })
    })
  }

  getPostData(id: string) {
    this.postDoc = this.afs.doc<Post>(`posts/${id}`)
    return this.postDoc.valueChanges()
  }

  getPost(id: string) {
    return this.afs.doc<Post>(`posts/${id}`)
  }

  create(data: Post) {
    this.postsCollection.add(data)
  }

  delete(id: string) {
    return this.getPost(id).delete()
  }

  update(id: string, formData) {
    return this.getPost(id).update(formData)
  }
}

从'@angular/core'导入{Injectable}
进口{
安古拉火炉店，
AngularFirestoreCollection，
角形文件
}来自“@angular/fire/firestore”
从“/Post”导入{Post}
导入“rxjs/add/operator/map”
@可注射（）
出口邮递服务{
收集后：AngularFirestoreCollection
博士后：AngularFirestoreDocument
建造商（私人afs:AngularFirestore）{
this.postsCollection=this.afs.collection（'posts'，ref=>
ref.orderBy（'published'，'desc'）
)
}
getPosts（）{
返回此.postsCollection.snapshotChanges（）.map（操作=>{
返回actions.map（a=>{
const data=a.payload.doc.data（）作为Post
const id=a.payload.doc.id
返回{id，…data}
})
})
}
getPostData（id:字符串）{
this.postDoc=this.afs.doc（`posts/${id}`）
返回此.postDoc.valueChanges（）
}
getPost（id:string）{
返回此.afs.doc（`posts/${id}`）
}
创建（数据：Post）{
this.postsCollection.add（数据）
}
删除（id:string）{
返回此.getPost（id）.delete（）
}
更新（id:string，formData）{
返回此.getPost（id）.update（formData）
}
}

请告诉我我做错了什么。我就是想不出来。

像这样试试

ngOnInit() {
    this.postService.getPosts().subscribe((response: any)=> {
      this.posts = response;
   })
  }

---

可观测的是懒惰的。请订阅启动它们。

我认为您需要以不同的方式加载模块

    Change the 
 { path: '', redirectTo: '/blog', pathMatch: 'full'},
      { path: '', loadChildren: './posts/posts.module#PostsModule' }
    to 
      { path: 'blog', loadChildren: './posts/posts.module#PostsModule' }

    You can remove the { path: '', redirectTo: '/blog', pathMatch: 'full'} .
    Assuming the './posts' path is correct.
    When the route matches with /blog it checks in the postmodule routing 
     ,it checks with 
    const routes: Routes = [
    {path:'blog',component:PostListComponent},
    {path:'blog/:id',component:PostDetailComponent},
    {path:'dashboard',component:PostDashboardComponent}
    ]
    and serves the PostListComponent

在app.module.ts中

const routes: Routes = [{
  path: 'blog',
  loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule),
},
{ 
  path: '',
  redirectTo: '/blog',
  pathMatch: 'full'
},
{
  path:'dashboard',
  component:PostDashboardComponent
}]

注意：在Angular 8和更高版本中，我们使用了不同的模块加载方式，您使用的方式是：

/posts/posts。模块#PostsModule

是旧的方式，请参阅

并将您的post.module.ts路由更改为

const routes: Routes = [
  {path:'',component:PostListComponent},
  {path:':id',component:PostDetailComponent}
]

---

请订阅

this.postService.getPosts（）

post-service getPosts（）方法您的路由错误，请查看

posts

的

大小是多少？请在控制台中发布
postService
的代码有任何错误吗？由于post-dashboard组件位于post模块内，因此无法在app.module中直接路由。ts:（然后，将该组件添加到post.module.ts中，并在url中添加“dashboard”作为一个单独的路径（makig it blog/dashboard）。记住在路径之前添加它：我们的答案是最有用的，但不幸的是，它仍然不起作用。首先，页面是否正在显示，我的意思是它是否已导航到所需的页面