File

router-x/src/outlet/publish-component.directive.ts

Description

Hooks into a router outlet's events and publishes the current component to the RouterOutletComponentBus to create a mapping of component instances by outlet name.

Components instantiated by outlets marked with publishComponent will be accessible by outlet name in the bus service.

<!-- Component template -->
<router-outlet publishComponent name="header"></router-outlet>
<router-outlet publishComponent              ></router-outlet>
<router-outlet publishComponent name="footer"></router-outlet>

Extends

Destroyable

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(outlet: RouterOutlet, componentBus: RouterOutletComponentBus, outletName: string)
Parameters:
Name Type Optional
outlet RouterOutlet No
componentBus RouterOutletComponentBus No
outletName string No

Methods

ngOnDestroy
ngOnDestroy()
Inherited from Destroyable

Unpublishes the outlet from the bus.

Returns: void
ngOnInit
ngOnInit()

Registers to outlet events to publish the activated and deactivated components to the bus. *

Returns: void
Protected subscribe
subscribe(observable: Observable, next?: (value?: T) => void, error?: (undefined) => void, complete?: () => void)
Inherited from Destroyable
Type parameters:
  • T

Subscribes to an observable and stores the subscription for automatic disposal. When ngOnDestroy() is called, all subscriptions created with this method will unsubscribe.

Parameters:
Name Type Optional Description
observable Observable<T> No

The observable to subscribe to.

next function Yes

(Optional) A callback function to execute on each emission of the observable.

error function Yes

(Optional) A callback function to execute when the observable errors.

complete function Yes

(Optional) A callback function to execute when the observable completes.

Returns: Subscription

The subscription created for the observable.

Properties

Protected Readonly destroyed
Type: Subject<void>
Default value: new Subject()
Inherited from Destroyable

Emits a value when ngOnDestroy() is called. Pipe together with takeUntil() to auto unsubscribe from your observables.

observable.pipe(takeUntil(this.destroyed)).subscribe(...);
Protected Readonly subscriptions
Type: Subscription
Default value: new Subscription()
Inherited from Destroyable

A list of all subscriptions manually added using the subscribe() method. These are automatically unsubscribed when ngOnDestroy() is called.

import { Attribute, Directive, OnDestroy, OnInit } from '@angular/core';
import { RouterOutlet                            } from '@angular/router';

import { Destroyable              } from '@bespunky/angular-zen/core';
import { AnyObject                } from '@bespunky/typescript-utils';
import { RouterOutletComponentBus } from './router-outlet-component-bus.service';

/**
 * Hooks into a router outlet's events and publishes the current component to the [`RouterOutletComponentBus`](/injectables/RouterOutletComponentBus.html) to create a mapping
 * of component instances by outlet name.
 * 
 * Components instantiated by outlets marked with `publishComponent` will be accessible by outlet name in the bus service.
 * 
 * @example
 * <!-- Component template -->
 * <router-outlet publishComponent name="header"></router-outlet>
 * <router-outlet publishComponent              ></router-outlet>
 * <router-outlet publishComponent name="footer"></router-outlet>
 * 
 * @See `RouterOutletComponentBus` for more details.
 * 
 * @export
 * @class PublishComponentDirective
 * @extends {Destroyable}
 * @implements {OnInit}
 */
@Directive({
    // eslint-disable-next-line @angular-eslint/directive-selector
    selector: 'router-outlet[publishComponent]'
})
export class PublishComponentDirective extends Destroyable implements OnInit, OnDestroy
{
    constructor(
        private outlet: RouterOutlet,
        private componentBus: RouterOutletComponentBus,
        @Attribute('name')
        private outletName: string
    ) { super(); }

    /**
     * Registers to outlet events to publish the activated and deactivated components to the bus.     *
     */
    ngOnInit()
    {
        // When the outlet activates a new instance, update the component on the bus
        this.subscribe(this.outlet.activateEvents, this.updateComponentOnBus.bind(this));
        // When the outlet deactivates an instance, set the component to null on the bus.
        this.subscribe(this.outlet.deactivateEvents, () => this.updateComponentOnBus(null));
    }

    /**
     * Unpublishes the outlet from the bus.
     */
    override ngOnDestroy()
    {
        // An outlet might be kept alive while its component is switched. So when the outlet is completely destroyed,
        // it will be completely removed from the bus, even though its value on the bus is null.

        this.componentBus.unpublishComponent(this.outletName);

        super.ngOnDestroy();
    }

    private updateComponentOnBus(instance: AnyObject | null): void
    {
        this.componentBus.publishComponent(instance, this.outletName);        
    }
}

results matching ""

    No results matching ""