CanDeactivate guard has no access to functions of component it's guarding
<p>I am trying to use a CanActivate guard in angular2 to ask user to save changes.
I am using angular RC4</p>

<p>Boot.ts</p>

<pre><code>bootstrap(App, [
...HTTP_PROVIDERS,
StorageService,
PortfolioNavigationGuard,
other...
</code></pre>

<p>Routes.ts</p>

<pre><code>export const PortfolioRoutes: RouterConfig = [
{ path: 'portfolios', component: 'PortfolioListComponent' },
{ path: 'portfolios/:id', component: 'PortfolioModelComponent', canDeactivate: [PortfolioNavigationGuard] },
{ path: 'portfolios/:id/:action', component: 'PortfolioModelComponent', canDeactivate: [PortfolioNavigationGuard]  }
</code></pre>

<p>Guard</p>

<pre><code>@Injectable()
</code></pre>

<p><code>export class PortfolioNavigationGuard implements CanDeactivate&lt;PortfolioDetailComponent&gt; {</code></p>

<pre><code>constructor(private router: Router) { }

canDeactivate(component: PortfolioDetailComponent) {

    component.canDeactivate();
    component.anyfunction() --- anyfunction is not a function

    return true;
}
</code></pre>

<p>The error</p>

<pre><code>EXCEPTION: Error: Uncaught (in promise): TypeError: component.canDeactivate is not a function
</code></pre>

<p>The component</p>

<pre><code>export class PortfolioDetailComponent {
canDeactivate() {
    console.log("WOW");
}
</code></pre>

<p>Why can't I call any functions on the component inside my guard?</p>