为什么我的 Post 列表组件没有加载？

Question

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

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-template-rows: auto;
  grid-gap: 10px;
  margin: 0 auto;
  max-width: 90%;
}
mat-card {
  margin: 10px 0;
}

post-list.component.html

<section>
  <mat-card *ngFor="let post of posts | async">
    <mat-card-content routerLink="{{post.id}}">
      <img mat-card-image src="{{post.image}}" alt="{{post.title}}">
      <h2>{{post.title}}</h2>
      <p>
        <small>Posted by {{post.author}} &bull; on {{post.published | date:"fullDate"}}</small>
      </p>
    </mat-card-content>
    <mat-card-actions align="end" *ngIf="auth.currentUserId === post.authorId">
      <button mat-icon-button (click)="delete(post.id)">
        <mat-icon>delete</mat-icon>
      </button>
    </mat-card-actions>
  </mat-card>
</section>

post-list.component.ts

import { Component, OnInit } from '@angular/core'
import { Observable } from 'rxjs/Observable'

import { PostService } from '../posts.service'
import { Post } from '../post'
import { AuthService } from '../../core/auth.service'

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {
  posts: Observable<Post[]>
  constructor(private postService: PostService, public auth: AuthService) {}

  ngOnInit() {
    this.posts = this.postService.getPosts()
  }

  delete(id: string) {
    this.postService.delete(id)
  }

}

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

const routes: Routes = [
{path:'blog',component:PostListComponent},
{path:'blog/:id',component:PostDetailComponent},
{path:'dashboard',component: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)
  }
}

请指导我做错了什么。我就是想不通。

Answer 1

这样试试

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

Answer 2

this.postService.getPosts().subscribe((posts) => this.posts = posts);

Observables 是惰性的。请订阅以启动它们。

Answer 3

    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

Answer 4

我认为你需要以不同的方式加载你的模块在 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.module#PostsModule 是旧方式，参见Angular docs。

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

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

为什么我的 Post 列表组件没有加载？

Why is my Post List component not loading?

javascript

angular

routing

angular-router