각 2

Question

임에 @CanActivate을 사용하십시오 UserService을 가지고 프로파일 구성 요소가하는 방법, 난 내 Userservice의 기능을 가지고 있고 경로가이 같은 활동 뭔가를해야만 할 수 있습니다 로그인을 사용하기 쉬운 경우 내가 확인하려면 :

@CanActivate((userService: UserService) => userService.checkLogin()) 

CanActivate 사용 방법은? Component 만들기 전에 당신은 당신이 원하는 경우에 거기에 true 또는 false를 반환해야합니다 있도록 사용자의 로그인 여부를 확인 할 수

Answer 1

@CanActivate() 통과가 호출되는 구성 요소로 라우팅되는지 여부.

import {appInjector} from './app-injector'; 
// ... 
@CanActivate((next, prev) => { 
    let injector = appInjector(); 
    let userService: UserService = injector.get(UserService); 

    // if the checkLogin() method returns a boolean, you can just return it 
    return userService.checkLogin(); 
} 

당신은 부트 스트랩에서 현재의 인젝터를 유지하기 위해 app-injector.ts가 필요합니다

let appInjectorRef; 

export const appInjector:any = (injector = false) => { 
    if (!injector) { 
     return appInjectorRef; 
    } 

    appInjectorRef = injector; 

    return appInjectorRef; 
}; 

당신의 bootstrap 전화에 바로 저장할 인젝터를 :

import {appInjector} from './app-injector'; 
// ... 
bootstrap(App, [ 
    [...], 
    UserService 
]).then((appRef) => appInjector(appRef.injector)); 

Answer 2

,

@Component({selector: ... }) 
@CanActivate(()=>console.log('Should the component Activate?')) 
class AppComponent { 

} 

그리고 CanActivate

Answer 3

@CanActivate 함수의 장식입니다 함수 인 하나의 매개 변수를 취합니다. 이 함수는 boolean 또는 Promise를 반환합니다. 그래서 당신은 그것을 좋아 사용할 수 있습니다 : 예를 들어, 당신의 checkLogin() 메소드는 약속을 반환,

return new Promise((resolve, reject) => { 
    // some code... 
    resolve(true); 
}); 

구성 요소 생성자를 통해 UserService를 주입하는 것을 잊지 마세요 경우

@CanActivate ((next, prev) => { 
    return this.userService.checkLogin(); 
}) 

export class MyComponent { 
    constructor(private userService : UserService) { } 
}