fix(tab): Fix mdcTabRouter activation detection for Ivy engine

Fixes #684

Author: Jorge Vargas

bundle/src/components/tabs/mdc.tab.router.directive.ts

@@ -1,14 +1,7 @@
-import { AfterContentInit, ChangeDetectorRef, ContentChild, ContentChildren, EventEmitter, forwardRef, QueryList, Directive, ElementRef,
-    HostBinding, HostListener, Input, OnChanges, OnDestroy, Optional, Output, Renderer2, Self } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { NgControl } from '@angular/forms';
+import { ContentChildren, forwardRef, QueryList, Directive, ElementRef, Optional, Renderer2 } from '@angular/core';
 import { Router, RouterLink, RouterLinkWithHref } from '@angular/router';
-import { MDCTabFoundation } from '@material/tabs';
-import { MdcTabAdapter } from './mdc.tab.adapter';
 import { AbstractMdcTabDirective } from './mdc.tab.directive';
 import { RouterActiveDetector } from '../utility/router.active.detector';
-import { asBoolean } from '../../utils/value.utils';
 import { MdcEventRegistry } from '../../utils/mdc.event.registry';
 
 @Directive({
@@ -21,7 +14,8 @@ export class MdcTabRouterDirective extends AbstractMdcTabDirective {
     @ContentChildren(RouterLinkWithHref, {descendants: true}) _linksWithHrefs: QueryList<RouterLinkWithHref>;
     private routerActive: RouterActiveDetector;
 
-    constructor(rndr: Renderer2, root: ElementRef, registry: MdcEventRegistry, private router: Router, private cdr: ChangeDetectorRef) {
+    constructor(rndr: Renderer2, root: ElementRef, registry: MdcEventRegistry, private router: Router,
+        @Optional() private link?: RouterLink, @Optional() private linkWithHref?: RouterLinkWithHref) {
         super(rndr, root, registry);
     }
 
@@ -33,10 +27,16 @@ export class MdcTabRouterDirective extends AbstractMdcTabDirective {
 
     ngAfterContentInit(): void {
         super.ngAfterContentInit();
-        this.routerActive = new RouterActiveDetector(this, this._links, this._linksWithHrefs, this.router, this.cdr);
+        this.routerActive = new RouterActiveDetector(this, this._links, this._linksWithHrefs, this.router,
+            this.link, this.linkWithHref);
         this.routerActive.init();
     }
 
+    ngOnChanges(): void {
+        if (this.routerActive)
+            this.routerActive.update();
+    }
+
     /** @docs-private */
     isRouterActive() {
         return this._active;

bundle/src/components/utility/router.active.detector.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, QueryList } from '@angular/core';
+import { Optional, QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { NavigationEnd, Router, RouterLink, RouterLinkWithHref } from '@angular/router';
@@ -14,7 +14,8 @@ export class RouterActiveDetector {
             private links: QueryList<RouterLink>,
             private linksWithHrefs: QueryList<RouterLinkWithHref>,
             private router: Router,
-            private cdr: ChangeDetectorRef) {
+            @Optional() private link?: RouterLink,
+            @Optional() private linkWithHref?: RouterLinkWithHref) {
         router.events.pipe(takeUntil(this.onDestroy$)).subscribe(s => {
             if (s instanceof NavigationEnd) {
                 this.update();
@@ -37,15 +38,20 @@ export class RouterActiveDetector {
 
     public update(): void {
         if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
-        const hasActiveLinks = this.hasActiveLinks();
-        const active = this.component.isRouterActive();
-        if (active !== hasActiveLinks) {
-            this.component.setRouterActive(hasActiveLinks);
-        }
+        Promise.resolve().then(() => {
+            const hasActiveLinks = this.hasActiveLinks();
+            const active = this.component.isRouterActive();
+            if (active !== hasActiveLinks) {
+                this.component.setRouterActive(hasActiveLinks);
+            }
+        });
     }
 
     private hasActiveLinks(): boolean {
-        return this.links.some(this.isLinkActive(this.router)) || this.linksWithHrefs.some(this.isLinkActive(this.router));
+        return (this.link && this.isLinkActive(this.router)(this.link)) ||
+            (this.linkWithHref && this.isLinkActive(this.router)(this.linkWithHref)) ||
+            this.links.some(this.isLinkActive(this.router)) ||
+            this.linksWithHrefs.some(this.isLinkActive(this.router));
     }
 
     private isLinkActive(router: Router): (link: (RouterLink | RouterLinkWithHref)) => boolean {