Отображение конкретной детали при нажатии кнопки "Просмотр" в Angular 4

Question

Мне нужна помощь в создании этой "функции просмотра деталей". Во-первых, у меня был пользовательский компонент, который я хочу имитировать, как он работает. Как будто вам нужно получить доступ к его услуге, когда вы пытаетесь получить конкретную вещь. Но пользовательский компонент это не из API. Теперь я хочу подражать этому в моем новостном компоненте, подробности которого поступают из API. Как я могу получить доступ к конкретным деталям новостного компонента? Я поместил приведенный ниже код как в пользовательский компонент, так и в новостной. Спасибо за помощь.

user.service.ts

import { User } from './user.model';
import { Subject } from 'rxjs/Subject';
export class UserService {

usersChanged = new Subject<User[]>();

  private users: User[]= [
    new User('Harry', 'James', 99999889),
    new User('Thomas', 'Baker', 99638798)
  ];

  getUsers() {
    return this.users.slice();
  }

  getUser(index: number) {
    return this.users[index];
  }

пользователя list.component

import { Component, OnInit } from '@angular/core';
import { User } from '../user.model';
import { UserService } from '../user.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {

  users: User[];
  index: number;

  constructor(private userService: UserService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
      this.users = this.userService.getUsers();
      this.userService.usersChanged
      .subscribe(
        (users: User[]) => {
          this.users = users;
        }
      );
  }

  onViewUserDetail(index: number){
    this.router.navigate(['users', index]);
  }

news.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class NewsService {
    constructor(private httpClient: HttpClient) {
  }

getNews() {
    const authToken = localStorage.getItem('auth_token'); 
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json') 
    .set('Authorization', `Bearer ${authToken}`);

    return this.httpClient
      .get('sample/news', { headers: headers })
      .map(
        (response => response));
}


getNewsDetail(index: number) {
    //
  }

Новости-list.component.ts

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html',
  styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {
  newslists: any;
  constructor(private newsService: NewsService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {

    this.newsService.getNews()
      .subscribe(
        (data:any) => {
          console.log(data);
          this.newslists = data.data.data;
          console.log(this.newslists);
        },
        error => {
          alert("ERROR");
        });
  }

  onViewNewsDetail(id: number){
    console.log(id);
    this.router.navigate(['news', id]);
  }

}

Answer 1

Я сделал это.

getAllNews() {

    if(this.newslist != null) {
      return Observable.of(this.newslist);
    } 

    else {
      const authToken = localStorage.getItem('auth_token'); 
      const headers = new HttpHeaders() 
      .set('Content-Type', 'application/json') 
      .set('Authorization', `Bearer ${authToken}`);

      return this.httpClient
        .get('samplei/news/', { headers: headers })
        .map((response => response))
        .do(newslist => this.newslist = newslist)
        .catch(e => {
            if (e.status === 401) {
                return Observable.throw('Unauthorized');           
            }

        });
    }
  }


  getNews(id: number) { 
    return this.getAllNews().map((data:any)=> data.data.data.find(news => news.id === id)) 
  }

Answer 2

Не совсем понял, в чем проблема. Вы переходите к подробному представлению onView*** Метод Detail(). Если вы правильно определили свои маршруты, он должен перейти к соответствующему компоненту. И в этом подробном компоненте ngOnInit() вы можете подписаться на paramMap активированного маршрута и вызвать API или получить значение из хранилища, как вам угодно.

ngOnInit() {
        this.paramSubscription = this.route.paramMap
            .switchMap((params: ParamMap) => this.userService.getUser(+params.get('id')))
            .subscribe(
            res => {
                this.user= <User>res;
            },
            err => console.log('error retreiving user detail')
            )

    }

вы будете иметь детали в свойстве user в вашем компоненте detail, и вы можете отобразить их так, как хотите.

Обновить

Чтобы получить подробную информацию о ваших новостях, вы можете создать магазин новостей с темой поведения, который позвонит вам в службу, чтобы получить все новости - список. Ваш компонент также может вызвать этот магазин. Этот магазин выставит получателя вашего личного предмета поведения, который выставит его как Наблюдаемый.

Затем вы можете получить доступ к значению предметов в любое время с помощью getValue(), и вам не нужно будет снова вызывать API для любого вызова детализации представления. Смотрите пример ниже:

    @Injectable()
    export class NewsStore {
        private _news: BehaviorSubject<List<News>> = new BehaviorSubject(List([]));

        constructor(
            private newsService: NewsService) {
            this.loadInititalData();
        }

        get news() {
            return this._news.asObservable();
        }

    getNews(id: number): any {
            return this._news.getValue().filter(news=> news.id == id);
        }

loadInititalData() {
        this.newsService.getAll()
            .subscribe(
            res => {
                let news= res;
                this._news.next(List(news))
            },
            err => this.handleError(err, "loadinitialdata")
            );
    }
    }