【Angular&rxjs】rxjs#fromEventとViewChildでコンポーネント間のデータ受け渡しを考えてみる

            1. 親子関係のあるコンポーネント間で、
    @Input/@Outputデコレーターを用いて
    EventEmitter経由でデータをやり取りする方法

2. 親子関係のないコンポーネント間で、
    サービスを利用して、
    データを共有・監視する方法

        

            $ ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.1.3
Node: 10.16.3
OS: linux x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

        

            tree -I node_modules -L 5
.
├── README.md
├── angular.json
├── browserslist
├── e2e
├── karma.conf.js
├── package.json
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── components
│   │   │   ├── my-lazyloaded-compo
│   │   │   │   ├── my-lazyloaded-compo.component.scss
│   │   │   │   └── my-lazyloaded-compo.component.ts
│   │   │   └── my-happy-compo
│   │   │   　   ├── my-happy-compo.component.scss
│   │   │   　   └── my-happy-compo.component.ts
│   │   └── factories
│   │       └── lazyloading-compo-factory.service.ts
│   ├── assets
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
└── yarn.lock

        

            $ yarn ng g c components/myLazyloadedCompo      # 任意の位置で生成可能な動的コンポーネント
$ yarn ng g c components/myHappyCompo           # (通常の)静的コンポーネント
$ yarn ng g s factories/lazyloadingCompoFactory # 動的コンポーネントを生成するファクトリーサービス

        

            import { Component, OnInit, ViewChild, ViewContainerRef, ElementRef } from '@angular/core';
import { LazyloadingCompoFactory } from '../../factories/lazyloading-compo-factory.service.ts';

@Component({
    selector: 'app-my-happy-compo',
    template: `
    <div>
        <p #message_from_children>You're now selecting...:</p>
    </div>
    <ng-container #dynamic></ng-container>
    `,
    styleUrls: ['./my-happy-compo.component.scss']
})
export class MyHappyCompoComponent implements OnInit {

    @ViewChild('dynamic', {
        read: ViewContainerRef,
        static: true
    }) vc: ViewContainerRef;

    @ViewChild('message_from_children', { static: true }) message: ElementRef;

    constructor(
        private lcf: LazyloadingCompoFactory
    ) { }

    ngOnInit() {
        this.lcf.setRootViewContainerRef(this.vc);
        for (let i = 0 ; i < 100 ; i++) {
            this.lcf.addDynamicComponent({name: 'Compo' + i, id: i}, this.message);
        }
    }
}

        

            import { Component, Input, AfterViewInit, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { Subscription, fromEvent } from 'rxjs';
import { mapTo, debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
    selector: 'app-my-lazyloaded-compo',
    template: `
        <div class="box-style" #reactiveBox>
            <p>Hello, {{data.name}}!!</p>
            <p>Lazy-loaded Compo {{data.id}}</p>
        </div>
    `,
    styleUrls: ['./my-child-lazyloaded-compo1.component.scss']
})
export class MyLazyloadedCompoComponent implements AfterViewInit, OnDestroy {
    @Input() data: any;
    @Input() elemInParent: ElementRef;
    @ViewChild('reactiveBox', { static: false }) reactBox: ElementRef;

    private subscription: Subscription;

    constructor() { }

    ngAfterViewInit(): void {
        const terms$ = fromEvent<any>(this.reactBox.nativeElement, 'click').pipe(
            mapTo(this.data),
            debounceTime(1000),
            distinctUntilChanged()
        );
        this.subscription = terms$.subscribe(inner_data => {
            if (this.elemInParent) {
                this.elemInParent.nativeElement.innerHTML = 'You\'re now selecting...:' + JSON.stringify(inner_data);
            }
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

        

            .box-style {
    padding: 40px 16px;
    display: block;
    border: 1px solid #ccc;
    margin-bottom: 16px;
}

        

            import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { MyHappyCompoComponent } from './components/my-happy-compo/my-happy-compo.component';
import { MyChildLazyloadedCompo1Component } from './components/my-lazyloaded-compo/my-lazyloaded-compo.component';

@NgModule({
    declarations: [
        AppComponent,
        MyHappyCompoComponent,
        MyLazyloadedCompoComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [
        MyLazyloadedCompoComponent // ✍ 追加
    ]
})
export class AppModule { }

        

            ...
    const terms$ = fromEvent<any>(
        this.reactBox.nativeElement, 'click' // コンポーネントのDOM要素がクリックされたら...
    ).pipe(
        mapTo(this.data),      // クラスメンバのdataを送信
        debounceTime(1000),    // その後1s間は他から着火したイベントは受け付けない
        distinctUntilChanged() // 送信されたdataが既に送信済みなら棄却(dataは一回だけ採用)
    );
...

        

            import { Injectable, ComponentFactoryResolver, ViewContainerRef, ElementRef } from '@angular/core';
import { Subject } from 'rxjs';

import { MyLazyloadedCompoComponent } from '../components/my-lazyloaded-compo/my-lazyloaded-compo.component';

@Injectable({
    providedIn: 'root'
})
export class LazyloadingCompoFactory {
    rootViewContainer: ViewContainerRef;

    constructor(
        private cfr: ComponentFactoryResolver
    ) { }

    public setRootViewContainerRef(viewContainerRef: ViewContainerRef) {
        this.rootViewContainer = viewContainerRef;
    }

    public addDynamicComponent(data: any, elemInParentComp?: ElementRef) {
        const factory = this.cfr.resolveComponentFactory(MyLazyloadedCompoComponent);
        const component = this.rootViewContainer.createComponent(factory);
        (component.instance as MyLazyloadedCompoComponent).data = data;
        if (elemInParentComp) {
            (component.instance as MyLazyloadedCompoComponent).elemInParent = elemInParentComp;
        }
        this.rootViewContainer.insert(component.hostView);
    }
}