Angular 2 ~ 6: Какой самый эффективный способ связи с «Компонентами»? - PullRequest
Новая
       17

Angular 2 ~ 6: Какой самый эффективный способ связи с «Компонентами»?

0 голосов
/ 02 июля 2018

Это единственные известные мне методы:

  • @ Input / @ Output | Это для общения ребенка с родителем и наоборот
  • @ ViewChild | Это для связи с дочерним компонентом
  • @ Injectable Service | обмениваться данными с любым компонентом
  • rxjs / поведенческих тем | Обмен данными с любым компонентом

Я также видел пример компонента @Injectable, но я не уверен, является ли это способом обмена данными компонента или нет.

Хорошо, я надеюсь, что приведенный выше текст достаточно ясен, чтобы все могли понять, куда я иду. Мне нужен самый эффективный и чистый способ (-ы) для совместного использования переменных и методов компонентов с любым компонентом без необходимости создавать большой беспорядок и снижать производительность.

Я думаю обмениваться данными следующим образом, но я не уверен, насколько это эффективно при наличии нескольких компонентов:

РОДИТЕЛИ 

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.scss']
})
class ParentComponent implements OnInit, AfterViewInit {
    public instance: ParentComponent;
    @ViewChild(ChildComponent) childComponent;

    constructor() {
        this.instance = this;
    }

    doSomethingWithParentMethod(strData: string) {
        console.log('parent data: ' + strData);
    }

    ngOnInit(): void {
    }

    ngAfterViewInit() {
        this.childComponent.doSomethingMethod('pass data to child in string type');
    }
}

И в родительском файле HTMl: 

<app-child [parent]="instance"></app-child>

РЕБЕНКА 

@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss']
})
class ChildComponent {
    @Input() parent;

    public function doSomethingMethod(strData: string) {
        console.log('child data: ' + strData);
    }

}

1 Ответ

0 голосов
/ 02 июля 2018 
@Injectable Service | share data with any component

и изменяется согласно требованию, но для универсального сервиса в основном для передачи данных

...