У меня проблема, когда я вручную набираю localhost: 4200 / create, он попадает на страницу, куда я хочу его перейти, но когда я нажимаю ссылку, чтобы привести меня туда, я получаю сообщение об ошибке:

TypeError: Cannot read property 'unsubscribe' of undefined
    at PostListComponent.ngOnDestroy  

Вот мой код:

Header.component.html

<mat-toolbar color="primary">
  <span><a routerLink="/">My Messages</a></span>
  <ul>
    <li><a routerLink="/create">New Post</a></li>
  </ul>
</mat-toolbar>

Приложение - routing.module.ts :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PostCreateComponent } from './posts/post-create/post-create.component';
import { PostListComponent } from './posts/post-list/post-list.component';

const routes: Routes = [
  {path: '', component: PostListComponent},
  {path: 'create', component: PostCreateComponent},
];

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

Postlistcomponent.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';

import { Post } from '../posts';
import { PostsService } from '../posts.service';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css'],
})
export class PostListComponent implements OnInit, OnDestroy {
  
  posts: Post[] = [];
  private postsSub: Subscription;
  constructor(public postsService: PostsService) {}

  ngOnInit(): void {
    this.postsService.getPosts();
    this.postsService.getPostUpdateListener().subscribe((posts: Post[]) => {
      this.posts = posts;
    });
  }

  onDelete(postId: string) {
    this.postsService.deletePost(postId);
  }

  ngOnDestroy() {
    this.postsSub.unsubscribe();
  }
}

2
Miloš Milutinov 8 Июн 2021 в 16:33

2 ответа

Лучший ответ

Как и говорится в ошибке, вы вызываете unsubscribe для объекта, которого нет в PostListComponent (postlist.component.ts?)

В этом файле найдите функцию ngOnDestroy и для любых функций this.object$.unsubscribe() сначала проверьте объект -

if (this.object$ && !this.object$.closed) {
   this.object$.unsubscribe()
}

Я использую this.object$ в качестве примера - ваша переменная будет называться иначе

3
Kinglish 8 Июн 2021 в 13:40

При переходе от / к /create ваш ngOnDestroy в PostListComponent выдает ошибку.

Вот почему это происходит по ссылке, а не при вводе URL.

1
Matt 8 Июн 2021 в 13:42