web-dev-qa-db-ja.com

Angular 2-新しいangular 2.0.0-rc.1ルーターの使用方法

新しいangular 2プロジェクトを書き始め、2 angular router：

  1. "@angular/router": "2.0.0-rc.1"、
  2. "@angular/router-deprecated": "2.0.0-rc.1"、

angularサイトで新しいルーターの使用方法が見つかりませんでした。たとえば、どのコンポーネントをインポートする必要がありますか。

だから私の質問は：

  1. router-deprecatedを使用する必要がありますか？
  2. 新しいルーターの使用方法に関する良いドキュメントはありますか？
javascriptangularangular2-routing
37
ofir fridman

ベータ版（非推奨）と比較して、Angular 2ルーター（RC1）を使用する方法は次のとおりです：

  • RoutesはRouteConfigを置き換えます。

  • あなたの設定の中に新しい構文があります：

    {path: '/path', component: MyPathComponent}

    の代わりに：

    {path:'/path', name: 'MyPath', component: MyPathComponent}

  • RouterLinkの使用は次のようになりました。

    <a [routerLink]="['/path/2']">Click to navigate</a>

    の代わりに：

<a [routerLink]="['MyPath', 'Detail', {id:2}]">Shark Crisis</a>

  • また、RouteParamsはもうありません。代わりに、ルーターライフサイクルフックを使用してパラメーターを取得します：CanActivate、OnActivate、およびCanDeactivate。

ngOnInit内でparamsを使用した場合、次のようにできます。

routerOnActivate(curr: RouteSegment): void {
           curr.getParam('id');
       }

次のようなものになります。

import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";

@Injectable()
@Component({
    selector: "my-app",
    templateUrl: `<a [routerLink]="['/component1']">Click to go to component 1</a>`,
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
    {path: "/component1", component: Component1},
    {path: "/component2", component: Component2}
])
export class AppComponent {
    constructor(private _router: Router) {
        //If you want to use Router in your component (for navigation etc), you can inject it like this
    }
}

Update（9/6/16）：Angular 2 RC1 Routerは古いものと同様に非推奨になっているようです。新しい推奨事項は、@ angular/routerのバージョン3.0.0-alpha.3を使用することです。

詳細はAngularブログ： http://angularjs.blogspot.co.il/2016/06/improvements-coming-for-routing-in.html

新しいルーターの概要は次のとおりです。 http://victorsavkin.com/post/145672529346/angular-router

そして、ここに機能するプランカーがあります： http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

38
Eran Shabi

これは、新しいルーターを使用するのに役立ちました： https://angular.io/docs/ts/latest/guide/router.html

EDIT：現時点では上記のリンクは空です。tylerjgarlandのおかげでキャッシュバージョン： https://web.archive.org /web/20160416143350/https://angular.io/docs/ts/latest/guide/router.html

Ng-confからのMisko Heveryのルータートークも参考になりました： https://www.youtube.com/watch?v=d8yAdeshpcw

UPDATE：RC1ルーターは放棄されているようです。 https://github.com/angular/angular/issues/9088 おそらく、ドキュメントが完成するのではなく消滅した理由です...

UPDATE 2：RC2ルーターがリリースされました： https://angular.io/docs/ts/latest/ guide/router.html

コンポーネントルーターはアルファリリースです。これは推奨されるAngular 2ルーターであり、以前の非推奨のベータおよびv2ルーターに取って代わります。

新しいアルファルーターのpackage.jsonの次の行：

"@angular/router": "3.0.0-alpha.7",

私がここで見つけたように： Installing Angular 2 RC2 w/new component router ）

11
Steve

以下に試すことができる別のリソースを示します（Angular RC.1）： https://playcode.org/routing-in-angular-2-rc-1/

そして、ここにコードがあります： https://github.com/jlsuarezs/RoutingExample

Angular-CLIを使用して新しいルートを作成することをお勧めします。 https://github.com/angular/angular-cli

例： https://github.com/angular/angular-cli#generated-a-route

6
Eusthace

新しいAngular 2つのルーターのドキュメントと開発作業が進行中。それまでは「@ angular/router-deprecated」を使用できます。

@AkhileshKumarの提案は良いです、それを試してみてください、そのすべてが基本的なルーターの使用をカバーしていると思います。

5
Vinay Pandya

RC.1の更新

新しいルーター@angular/routerのAngular2 RC.1は非推奨です。
Angularチームは新しいルーターの提供に取り組んでいます。
古い@angular/router-deprecatedこの新しい新しいルーターが使用可能になるまでルーター

オリジナル

新しいルーターのドキュメントは現在作成中です。例を参照してください https://github.com/angular/angular.io/pull/1214

新しいルーターにはいくつかの問題がありますが、全体的にはすでに正常に機能しています。使用方法だけを知りたくない場合は、少なくとも次のAngular RCバージョンを待ちます。おそらく簡単に修正できます。

4
Günter Zöchbauer

Angle2のネストされたルーティングコードの動作： "@ angular/router"： "2.0.0-rc.1"、つまり新しいルーターの場合：

親ルート：

import {Component} from '@angular/core';
import {Router,Routes,ROUTER_DIRECTIVES} from '@angular/router';

import {Login} from '../login/login';
import {Dashboard} from '../dashboard/dashboard';
import {Admin} from '../admin/admin';
let template = require('./app.html');

@Component({
  selector: 'auth-app',
  template: template,
  directives: [ROUTER_DIRECTIVES],
})

@Routes([
  {path: '/login', component: Login},
  {path: '/dashboard', component: Dashboard},
  {path: '/admin', component: Admin }
])

export class App{
  constructor(public router: Router) {
  }
}

子ルート

import { Component} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { Router, ROUTER_DIRECTIVES ,Routes} from '@angular/router';

import {AddUsrCat} from './addUsrCat/addUsrCat';
import {AllUsr} from './allUsr/allUsr';
declare var jQuery:JQueryStatic;
let template = require('./admin.html');

@Component({
  selector: 'admin',
  directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  template: template
})
@Routes([
  {path: '/addUsrCat', component: AddUsrCat},
  {path: '/allUsr', component: AllUsr},
  {path: '*', component: AddUsrCat},
])

export class Admin {
  constructor(public router: Router, public http: Http) {
  }
}

このプロジェクトを複製します 認証（ログイン/ログアウト）を使用した基本的なAngular2（ "2.0.0-rc.1"）プロジェクトはシードプロジェクトとして機能します 使用@ angular/routerすなわち新しいルート

3
Akhilesh Kumar