角度 4 - 在没有父子关系的另一个组件中更新属性

Question

我有 2 个不相关的组件，navbar 和 edit-page

在navbar 组件中，我从集合中获取页面标题列表，并使用edit-page 组件编辑页面标题，但因为我总是可以看到来自navbar 组件的所有页面标题，我希望在编辑页面标题后立即更新它。

如何在没有 @input 和 @output 的情况下实现这一目标？据我了解，我应该创建某种共享服务，但我不知道该怎么做？

pages.service.ts

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class PagesService {

    constructor(private http: Http) { }

    getPages() {
        return this.http.get('http://localhost:3000/pages')
            .map(res => res.json());
    }

    getEditPage(id) {
        return this.http.get('http://localhost:3000/pages/edit-page/' + id)
            .map(res => res.json());
    }

    postEditPage(value) {
        return this.http.post('http://localhost:3000/pages/edit-page/' + value.id, value)
            .map(res => res.json());
    }

}

导航栏组件

pages: any[];
ngOnInit() {
        this.pagesService.getPages().subscribe(pages => {
            this.pages = pages;
        });
    }

编辑页面组件

editPage({ value, valid }) {
        if (valid) {
            this.pagesService.postEditPage(value).subscribe(res => {
                if (res == "ok") {
                    this.successMsg = true;
                }

            });
        } else {
            console.log('Form is not valid');
        }
    }

所以在edit-page 组件中执行editPage 方法后，我希望navbar 组件中的pages 属性自动更新。

Answer 1

像这样使用 Observables。

import { BehaviorSubject } from "rxjs/BehaviorSubject";

export class MyService(){
public someProp  = new BehaviorSubject<string(null);

 }
 
 export class ComponentOne implements OnInit{
     constructor(private service:MyService){
    }
    ngOnInit(){
    //this will set the value of someProp
      this.service.someProp.next('some value')
    }
 
 }
 export class ComponentTwo implements OnInit{
    constructor(private service:MyService){
    }
    ngOnInit(){
        //this will get latest value from someProp
        // also will update when it changes
      this.service.someProp.subscribe(res=>{
      console.log('this is the current value',res)
      })
    
    }
 
 }
 

Answer 2

创建一个服务，该服务返回页面并在页面数组更改时使用 EventEmitter 发出事件。将 PagesService 注入您的 NavbarComponent 和 EditPageComponent。

在 EditPageComponent 中进行更改并更新 PageService 中的页面并发出 pagesChanged 事件。然后在 NavbarComponent 中订阅 pagesChanged 事件。

import { EventEmitter } from '@angular/core';
import { pages} from './../shared/pages.model';


export class PageService {

    pagesChanged = new EventEmitter<Pages[]>();

    private pages: Page[] = [
        new Page('PageName1'),
        new Page('PageName2'),
      ];    

      getPages() {
          return this.pages.slice();
      }

      editPage(page: Page) {
        // write you logic to edit the page or pages array.
        // Emit the pagesChanged event.
        this.pagesChanged.emit(this.pages.slice());
      }
}

并像这样订阅 NavabarComponent 中的 pagesChanged 事件。

import { Page} from './../shared/pages.model';
import { PagesService } from './pages.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  pages: Page[];

  constructor(private pageService: PagesService) { }

  ngOnInit() {
    this.pages= this.pageService.getPages();
    this.pageService.pagesChanged
      .subscribe(
        (pages: Page[]) => {
          this.pages= pages;
        } 
      )
  }

}

希望这能解决您的问题。