How to use @angular/router-deprecated - 10 common examples

title: 'Please Input Code',
            scrollbar: false,
            area: ['400px', '300px'],
            moveOut: true,
            moveType: 1
        }, function (value, index) {
            service_1.DataStore.socket.emit('key', value);
            // layer.msg(value); //得到value
            layer.close(index);
        });
    };
    NavComponent = __decorate([
        core_1.Component({
            selector: 'nav',
            template: "<div class="\&quot;nav\&quot;">\n    <ul>\n        <li><a><img height="\&quot;26px\&quot;/" src="\&quot;./imgs/logo.png\&quot;"></a>\n        </li>\n        <li k="index">\n            <a>{{v.name}}</a>\n            <ul>\n                <li>\n                    <a>{{vv.name}}</a>\n                    <a id="\&quot;{{vv.id}}\&quot;">{{vv.name}}</a>\n                </li>\n            </ul>\n        </li>\n    </ul>\n</div>",
            directives: [router_deprecated_1.ROUTER_DIRECTIVES, common_1.NgClass]
        }), 
        __metadata('design:paramtypes', [service_1.AppService, core_2.Logger])
    ], NavComponent);
    return NavComponent;
}());
exports.NavComponent = NavComponent;

__metadata('design:paramtypes', [membershipService_1.MembershipService, common_2.Location])
    ], AppRoot);
    return AppRoot;
}());
exports.AppRoot = AppRoot;
var AppBaseRequestOptions = (function (_super) {
    __extends(AppBaseRequestOptions, _super);
    function AppBaseRequestOptions() {
        _super.apply(this, arguments);
        this.headers = new http_1.Headers({
            'Content-Type': 'application/json'
        });
    }
    return AppBaseRequestOptions;
}(http_1.BaseRequestOptions));
platform_browser_dynamic_1.bootstrap(AppRoot, [http_1.HTTP_PROVIDERS, router_deprecated_1.ROUTER_PROVIDERS,
    core_1.provide(http_1.RequestOptions, { useClass: AppBaseRequestOptions }),
    core_1.provide(common_2.LocationStrategy, { useClass: common_2.HashLocationStrategy }),
    dataService_1.DataService, membershipService_1.MembershipService, utilityService_1.UtilityService])
    .catch(function (err) { return console.error(err); });
// ROUTER_BINDINGS: DO NOT USE HERE IF YOU WANT TO HAVE HASHLOCATIONSTRATEGY!! 
//# sourceMappingURL=app.js.map

// #enddocregion


@Component({
  selector: 'example-app',
  template: `
    <h1>My app</h1>

    <nav>
      <a>Child</a>
    </nav>
    
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([{path: '/parent/...', name: 'Parent', component: ParentCmp}])
export class AppCmp {
}

export function main(): Promise&gt; {
  return bootstrap(
      AppCmp, [{provide: APP_BASE_HREF, useValue: '/@angular/examples/router/ts/on_activate'}]);
}

}
}
// #enddocregion


@Component({
  selector: 'example-app',
  template: `
    <h1>Say hi to...</h1>
    <a id="naomi-link">Naomi</a> |
    <a id="brad-link">Brad</a>
    
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: '/', component: MyCmp, name: 'HomeCmp'},
  {path: '/:name', component: MyCmp, name: 'HomeCmp'}
])
export class AppCmp {
}


export function main(): Promise&gt; {
  return bootstrap(
      AppCmp, [{provide: APP_BASE_HREF, useValue: '/@angular/examples/router/ts/reuse'}]);
}

});
        // route the user to a view based on presence of access token
        if (auth.isUserAuthenticated) {
            // access token exists...display the users files
            router.navigate(["/Home"]);
        }
        else {
            // access token doesn't exist, so the user needs to login
            router.navigate(["/Login"]);
        }
    }
    App = __decorate([
        core_1.Component({
            selector: "graph-app",
            templateUrl: __dirname + "/view-main.html",
            directives: [router_deprecated_1.ROUTER_DIRECTIVES, profile_1.Profile]
        }),
        router_deprecated_1.RouteConfig([
            { name: "Default", path: "", redirectTo: ["Login"] },
            { name: "Home", component: home_1.Home, path: "/home" },
            { name: "Login", component: login_1.Login, path: "/login" },
            { name: "Files", component: files_1.Files, path: "/files" },
            { name: "Groups", component: groups_1.Groups, path: "/groups" },
            { name: "Contacts", component: contacts_1.Contacts, path: "/contacts" },
            { name: "Mails", component: mails_1.Mails, path: "/mails" },
            { name: "Notes", component: notes_1.Notes, path: "/notes" },
            { name: "Tasks", component: tasks_1.Tasks, path: "/tasks" },
            { name: "Trending", component: trending_1.Trending, path: "/trending" },
            { name: "Users", component: users_1.Users, path: "/users" },
        ]), 
        __metadata('design:paramtypes', [http_1.Http, router_deprecated_1.Router, authHelper_1.AuthHelper])
    ], App);

* Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {APP_BASE_HREF} from '@angular/common';
import {Component, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {CanActivate, ComponentInstruction, ROUTER_DIRECTIVES, RouteConfig} from '@angular/router-deprecated';

function checkIfWeHavePermission(instruction: ComponentInstruction) {
  return instruction.params['id'] == '1';
}

// #docregion canActivate
@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})
@CanActivate(checkIfWeHavePermission)
class ControlPanelCmp {
}
// #enddocregion


@Component({
  selector: 'home-cmp',
  template: `
    <h1>Welcome Home!</h1>
    <div>
      Edit <a id="user-1-link">User 1</a> |
      Edit <a id="user-2-link">User 2</a>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})

<div class="ui cards">
                
            <div>

        </div>
    `,
    directives: [ImportPgn, ROUTER_DIRECTIVES, GamesCardItem],
    styles: [`
        .ui.icon.buttons {
            margin-bottom: 2rem;
        }
    `]
})
@CanActivate((next, prev) =&gt; {
    // TODO: Implement when we have DI here to get hold of our authenticationService
    // https://github.com/angular/angular/issues/4112
    // For now it is not much of a problem since we will be hiding the link to this component
    // and the back end won't serve any content anyway
    return true;
})
export class GamesList {
    private _games: Observable[] = [];
    private _isLoading : boolean = true;

    constructor (
        private _logger: LoggerService,
        private _importService: ImportService,
        private _notificationService: NotificationService,
        private _gamesService: GamesService
    ) {</div>

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES, RouteConfig, CanActivate} from '@angular/router-deprecated';

import {GamesService} from '../../services/api/games.service';
import {SocketApiService} from '../../services/socketApi.service';
import {GamesList} from './gamesList.component';
import {GameDetail} from './gameDetail.component';

@Component({
    providers: [GamesService, SocketApiService],
    template: `
        
    `,
    directives: [ROUTER_DIRECTIVES]
})
@CanActivate((next, prev) => {
    // TODO: Implement when we have DI here to get hold of our authenticationService
    // https://github.com/angular/angular/issues/4112
    // For now it is not much of a problem since we will be hiding the link to this component
    // and the back end won't serve any content anyway
    return true;
})
@RouteConfig([
    { path: '/', name: 'GamesList', component: GamesList, useAsDefault: true },
    { path: '/:id', name: 'GameDetail', component: GameDetail }
])
export class Games {}

`,
    directives: [Chessboard, MovesBrowser, BarChartAnalysis]
})
@CanActivate((next, prev) => {
    // TODO: Implement when we have DI here to get hold of our authenticationService
    // https://github.com/angular/angular/issues/4112
    // For now it is not much of a problem since we will be hiding the link to this component
    // and the back end won't serve any content anyway
    return true;
})
export class GameDetail implements OnDestroy {
    private _game: Game;
    private _analysisCompleted: boolean = false;
    private _chessJsInstance: Chess = new Chess();
    private _shortHistoryCache: any[] = [];
    private _fenCache: string[] = [];
    private _currentPositionIndex: number = -1;
    private _subscriptions: Subscription[] = [];

    constructor (

beforeEachProviders(() => [
    TestComponentBuilder,
    SettingsService,
    TaskService,

    // RouteParams is instantiated with custom values upon injecting
    provide(RouteParams, { useValue: new RouteParams({ id: null }) }),

    MockBackend,
    BaseRequestOptions,
    // We override the default Http provider implementation
    provide(Http, {
      useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
        return new Http(backend, options);
      },
      deps: [MockBackend, BaseRequestOptions]
    }),
    TimerWidgetComponent
  ]);