0

Обучаюсь Angular 2 и возник вопрос. Имеется 2 компонента:

TodoComponent

import {Component, OnInit} from '@angular/core';
import {Todo} from '../todo';
import {HttpService} from '../http.service';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
  todos: Observable<Todo[]>;

  constructor(private httpService: HttpService) {
  }

  ngOnInit() {
    this.todos = this.httpService.getTodos();
  }

}

и AppComponent

import { Component } from '@angular/core';
import {Todo} from './todo';
import {HttpService} from './http.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [HttpService]
})
export class AppComponent {
  todo: Todo = new Todo();
  constructor(private httpService: HttpService) {}
  submit(todo) {
    this.httpService.setTodo(todo.value).subscribe((data) => { });
  }
}

TodoComponent загружается через <router-outlet></router-outlet>. Он загружает данные с сервера, а AppComponent добавляет новые данные на сервер через метод submit. Как сделать повторную загрузку данных в TodoComponent, при нажатии кнопки из AppComponent?

1 ответ 1

2

Я так понял интересует вопрос межкомпонентного взаимодействия. В официальной документации это рекомендуют делать через дополнительный сервис https://v2.angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service. Но я в своих проектах обычно делаю так. В AppComponent создаем статический Subject и по нажатию кнопки генерируем событие Subject.next(). А в конструкторе TodoComponent подписываемся на это событие и обновляем данные.

app.component.html

<button (click)="buttonClick()"></button>

app.component.ts

import { Subject } from 'rxjs/Subject'

export class AppComponent {

    static onButtonClick = new Subject();

    buttonClick(){
        AppComponent.onButtonClick.next();
    }

}

todo.component.ts

import { AppComponent } from './app.component'

export class TodoComponent implements OnInit {

    ngOnInit(){
        AppComponent.onButtonClick.subscribe(() => {
            //do something
        });
    }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.