路由器+变化而变化[Angularjs 2]

我app.component这样的：路由器+变化而变化[Angularjs 2]

import { Component, Input } from '@angular/core'; 

import {AuthTokenService} from './auth-token.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    constructor(
     private Auth: AuthTokenService) { }; 

    isGuest: any = this.Auth.canActivate(); 
    title = 'app works!'; 
}

，我需要从子组件改变isGuest VAR login.component

在app.component.html我有这样的：

<h1> 
    {{isGuest}} 
</h1> 
<router-outlet></router-outlet>

我试着用@Output and Emitter改变它，但它不工作，因为我是我们成角度路由器。

来源

2016-10-24 Vladimir Djukic

'isGuest：任何= this.Auth.canActivate（）;'这是不正确的行。除此之外，您可以使用服务从childcmp对parentcmp进行更改。 – micronyks

为什么这是不正确的？你应该怎么样才能向我展示一个例子？ –

'constructor（ private Auth：AuthTokenService）{this.isGuest = Auth.canActivate（）;}'OR'ngOnInit（）{ this.isGuest = this.Auth.canActivate（）;}' – micronyks

我会去更新auth服务来提供Angular文档中的Observable（https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service）。

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
@Injectable() 
export class AuthService { 
    /* ... */ 
    private canActivateSource = new Subject<string>(); 
    public canActivate$ = this.canActivateSource.asObservable(); 
    /* ... */ 
    authenticate() { 
    /* ... */ 
    if (authenticated) { 
     this.canActivateSource.next(true); 
    } else { 
     this.canActivateSource.next(false); 
    } 
    /* ... */ 
    } 
    /* ... */ 
}

然后你就可以在你的app.component订阅像这样：

this.Auth.canActivate$.subscribe(canActivate => { 
    /* do something with canActivate */ 
});

而且从你的模板，使用async管：

{{ Auth.canActivate$ | async }}

https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

来源

2016-10-24 17:46:53

路由器+变化而变化[Angularjs 2]

回答

相关问题