Как правильно настроить маршруты в Angular - PullRequest
Новая
       80

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

0 голосов
/ 22 марта 2020

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

"Неожиданное значение '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 со всеми лучшими практиками. Пожалуйста, поправьте меня.

1 Ответ

3 голосов
/ 22 марта 2020

вы должны добавить @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: проверил ваш стек и исправил проблему, но затем вы получите ошибку с объявлением PostDetails, по тем же причинам. Пожалуйста, найдите параметры Компонента и узнайте, как правильно его использовать, вам нужно добавить декоратор @Component ко всем экземплярам, ​​и вам нужно добавить селектор и шаблон к нему (селектор - как он будет нацелен на html и template - это компонент html), вы можете использовать templateUrl для нацеливания на другой файл с помощью html, вы можете добавлять стили или styleUrls и т. д. c ....

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

...