Question

我需要帮助才能制作这个＆＃34;查看详情功能＆＃34;工作。首先，我有用户组件，我想模仿它的工作原理。就像您在尝试获取特定内容时必须访问其服务一样。但是用户组件不是来自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

没有完全明白这个问题是什么。您正在导航到View *** 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')
            )

    }

您将在详细信息组件的用户属性中获得详细信息，并且可以按照您希望的方式显示它。

<强>更新

要获取有关新闻的详细信息，您可以创建一个新闻商店，其中包含一个行为主题，该行为主题将呼叫您的服务以获取所有新闻 - 列表。您的组件也可以调用此商店。此商店将公开您的私人行为主题的getter，将其公开为Observable。

然后您可以通过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")
            );
    }
    }

Answer 2

我这样做了。

// ... Rest of code omitted for brevity
private static double sequence2(int i) {
    if (i <= 0) { return 0; }
    return (sequence2(max - i) - 1) / factorial(i); // max is defined in other code
}
private static double sigma(int n) {
    if (n <= 0) { return 0; }
    return sequence2(n) + sigma(n - 1);
}
private static int factorial(int n) {
    if (n <= 1) { return 1; }
    return n * factorial(n - 1);
}

在Angular 4中单击“查看”按钮时显示特定细节

2 个答案: