표시 세부 사항 각도 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') 
      ) 

    } 

세부 구성 요소의 사용자 속성에 세부 정보가 표시되어 원하는대로 표시 할 수 있습니다.

업데이트

뉴스에 대한 세부 사항을 얻으려면, 당신은 모든 뉴스를 얻기 위해 서비스를 호출하는 행동 피사체 뉴스 가게 만들 수 있습니다 - 목록을. 구성 요소가이 상점을 호출 할 수도 있습니다. 이 상점은 관찰 할 수있는 것으로 드러내는 사적인 행동 과목의 게터를 노출합니다.

그런 다음 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") 
      ); 
    } 
    }