Как правильно настроить маршруты в Angular

Я изучаю маршруты в Angular. Я следую некоторым руководствам от Pluralsight. Вот stackblitz для того же. Я попробовал очень простой код, чтобы понять маршрутизацию. Но я получаю эту ошибку:

«Неожиданное значение PostList, объявленное модулем PostModule. Пожалуйста, добавьте аннотацию @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 {}

Моя проблема - маршрутизация. Не могу правильно настроить маршруты. Для этого я создал stackblitz. Пожалуйста, укажите на мои ошибки. Я действительно хочу изучить Angular со всеми лучшими практиками. Пожалуйста, поправьте меня.


angular angular-routing angular-routerlink
person Tanzeel    schedule 22.03.2020    source источник
comment
Для компонента PostList нет декоратора компонента, чтобы определить, что это компонент.   -  person Adithya Sreyaj    schedule 22.03.2020

Ответы (1)


arrow_upward
3
arrow_downward

вы должны добавить @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)

edit: проверил ваш stackblitz и исправил проблему, но затем вы получаете сообщение об ошибке с объявлением PostDetails по тем же причинам. Пожалуйста, найдите параметры компонента и узнайте, как его правильно использовать, вам нужно добавить декоратор @Component ко всем экземплярам, ​​и вы должны добавить к нему селектор и шаблон (селектор — это то, как он будет выбран из html, и шаблон - это то, что представляет собой компонент html), вы можете иметь templateUrl для таргетинга на другой файл с html, вы можете добавить стили или styleUrls и т. д....

надеюсь, что это поможет, не стесняйтесь спрашивать что-нибудь еще

person Francisco Santorelli    schedule 22.03.2020
comment
На самом деле я мог бы использовать ng g c productList, но я решил написать код с нуля, чтобы узнать, что я пишу и почему я пишу. В следующий раз буду осторожнее. - person Tanzeel; 22.03.2020
comment
эй, я сам писатель... Я пишу все свои компоненты, директивы и сервисы вот так. И я уверяю вас, что это лучший способ учиться (и избегать ненужного кода, который создается автоматически). Продолжайте в том же духе: и вы увидите такие проблемы до того, как они произойдут в мгновение ока. Я поддерживаю ваш способ написать все это! - person Francisco Santorelli; 22.03.2020
comment
Сэр, последний вопрос. В моем post.service.ts вы можете видеть, что я создал метод getAllPosts(), который будет получать сообщения с сервера. Итак, где лучше всего вызывать этот метод, внутри конструктора или внутри ngOnInt? - person Tanzeel; 22.03.2020
comment
Я спрашиваю об этом, потому что позже я буду реализовывать код предварительной выборки данных, чтобы пользователь не получил пустую страницу. Я буду использовать некоторые значки загрузки, пока данные не будут загружены с сервера. - person Tanzeel; 22.03.2020
comment
для согласованности onInit имеет больше смысла, так как это запускается ПОСЛЕ сборки компонента (конструктор запускает его после сборки компонента, но перед возвратом объекта компонента в приложение, если это имеет смысл)..... Таким образом, это может практически не имеют значения в вашем конкретном случае, но хорошо знать, что они происходят в разное время... конструкция > привязка (onChanges) > onInit > afterViewInit... и т. д., эти крючки жизненного цикла можно найти в Google, если вы забудете :) я все время забываю - person Francisco Santorelli; 22.03.2020