DashComponent

dash.component.ts

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { StateService } from '../../state/state.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FrameComponent } from '../../shared/frame/frame.component';
import { Subscription } from 'rxjs/Subscription';
import { FrameService } from '../../services/frame.service';
@Component({
  selector: 'm-dash',
  template: `
    <router-outlet *ngIf="!frameSrc"></router-outlet>
    <div *ngIf="frameSrc" class="bg-accent p-2 cursor-pointer" (click)="frame.src=null">
      Back <span *ngIf="(state.subject('agenda')|async); let agenda">to Agenda "{{agenda.name}}"</span>
    </div>
    <div class="container" *ngIf="frameSrc">
      <m-frame [src]="frameSrc"></m-frame>
    </div>
  `,
  styleUrls: ['./dash.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashComponent implements OnInit, OnDestroy {

  public stateChanges = [];
  public frameSrc: string = null;
  private subs: Subscription[] = [];
  constructor(
    public state: StateService,
    private route: ActivatedRoute,
    private cdRef: ChangeDetectorRef,
    private router: Router,
    public frame: FrameService
  ) { }

  ngOnInit() {
    this.subs.push(this.route.queryParams.subscribe(query => {
      this.frameSrc = query.frame || null;
      this.cdRef.markForCheck();
    }));
    this.subs.push(this.frame.srcChange.subscribe(src => {
      this.router.navigate([], src ? { queryParams: { frame: src } } : {});
    }));
  }
  ngOnDestroy() {
    this.subs.forEach(sub => sub.unsubscribe());
  }

}