ダーツangle2 with @canActivate

Question

ダーツと角度2についてのチュートリアルでは、私のアプリケーションを保護し、どのように説明するのか不十分です。

angle2のダーツでCanActivateとルーターを実装するにはどうすればよいですか？

Answer 1

ここでは、CanActivateを使用してコンポーネント（source）を保護するサンプルを示します。

import 'dart:html'; 
import 'package:angular2/core.dart'; 
import 'package:angular2/router.dart'; 

@Component(
    selector: 'my-app', 
    styleUrls: const ['app_component.css'], 
    template: ''' 
    <h1>My First Angular 2 App</h1> 
    <div> 
    <a [routerLink]="['Home']">home</a> - 
    <a [routerLink]="['General']">general area</a> - 
    <a [routerLink]="['Secret']">secret area</a> 
    </div> 
    <router-outlet></router-outlet> 
    ''', 
    directives: const [ROUTER_DIRECTIVES], 
    providers: const [ROUTER_PROVIDERS], 
) 
@RouteConfig(const [ 
    const Route(
     path: '/', name: 'Home', component: HomeComponent, useAsDefault: true), 
    const Route(path: '/secret', name: 'Secret', component: SecretComponent), 
    const Route(path: '/general', name: 'General', component: GeneralComponent), 
]) 
class AppComponent {} 

@Component(
    selector: 'secret-area', 
    template: '<div>Welcome to the secret area</div>', 
) 
@CanActivate(secretValidator) 
class SecretComponent {} 

secretValidator(ComponentInstruction next, ComponentInstruction prev) { 
    if (prev.routeName == 'General') return true; 
    window.alert('Unauthorized'); 
} 

@Component(
    selector: 'general-area', 
    template: '<div>Welcome to the general area</div>', 
) 
class GeneralComponent {} 

@Component(
    selector: 'm-home', 
    template: '<div>Welcome</div>', 
) 
class HomeComponent {} 

この例では、現在、それ以外GeneralComponentとないを表示している場合にのみ、あなたがSecretComponentをロードすることができます。