Angular => ルーティング

子どもとのルーティング

私はこれをapp.routing.tsまたはapp.module.tsファイル内の子ルートを適切にネストする方法であることがわかりました（あなたの好みに応じて）。このアプローチは、WebPackまたはSystemJSを使用する場合に機能します。

次の例は、ホーム、ホーム/カウンタ、およびホーム/カウンタ/フェッチデータのルートを示しています。最初と最後のルートはリダイレクトの例です。最後に、例の最後に、別のファイルにインポートするルートをエクスポートする適切な方法があります。例えば、 app.module.ts

さらに説明すると、Angularでは、親ルートを表すために、親コンポーネントを含む子配列内にパスレスルートがあることが必要です。ちょっと混乱しますが、子ルートの空白のURLについて考えると、親ルートと同じURLになります。

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";

const appRoutes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
    },
    {
        path: "home",            
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "counter",                    
                children: [
                    {
                        path: "",
                        component: CounterComponent
                    },
                    {
                        path: "fetch-data",
                        component: FetchDataComponent                            
                    }
                ]
            }
        ]
    },
    {
        path: "**",
        redirectTo: "home"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

Sirajによる素晴らしい例と説明

基本的なルーティング

ルーターは、アプリケーションとのユーザーのやりとりに基づいて、あるビューから別のビューへのナビゲーションを可能にします。

次に、基本的なルーティングをAngular -

注：このタグを持っていることを確認してください：

<base href='/'>

あなたのindex.htmlファイルのheadタグの下の最初の子として。この要素は、あなたのアプリケーションフォルダがアプリケーションルートであることを示します。 Angularはあなたのリンクを整理する方法を知っています。

package.jsonの正しい/最新のルーティング依存関係を指していることを確認します（最新のAngularを使用しています）。またnpm installをすでに行っていることを確認してください。
```
"dependencies": {
    "@angular/router": "^4.2.5"
}
```

インターフェイス定義に従ってルートを定義します。

interface Route {
  path?: string;
  pathMatch?: string;
  component?: Type<any>;
}

ルーティングファイル（ routes/app.routing.ts ）で、異なるルーティングパス用に設定する必要があるすべてのコンポーネントをインポートします。空のパスは、デフォルトでビューが読み込まれることを意味します。パス内の「：」は、ロードされたコンポーネントに渡される動的パラメータを示します。

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { BarDetailComponent } from '../components/bar-detail.component';
import { DashboardComponent } from '../components/dashboard.component';
import { LoginComponent } from '../components/login.component';
import { SignupComponent } from '../components/signup.component';

export const APP_ROUTES: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'login' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'bars/:id', component: BarDetailComponent },
    { path: 'login', component: LoginComponent },
    { path: 'signup',   component: SignupComponent }
];
export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

あなたにapp.module.ts 、下にこれを置く@NgModule([])の下でimports ：

// Alternatively, just import 'APP_ROUTES
import {APP_ROUTING} from '../routes/app.routing.ts';
@NgModule([
    imports: [
        APP_ROUTING
        // Or RouterModule.forRoot(APP_ROUTES)
    ]
])

アクセスされたパスに基づいてルータコンポーネントをロード/表示します。 <router-outlet>ディレクティブは、コンポーネントをロードする場所を指定するために使用されます。
```
import { Component } from '@angular/core';

@Component({
    selector: 'demo-app',
    template: `
        <div>
            <router-outlet></router-outlet>
        </div>
    `
})
export class AppComponent {}
```
他のルートをリンクしてください。デフォルトでは、 RouterOutletはRoutes空のパスが指定されているコンポーネントをロードします。 RouterLinkディレクティブはhtmlアンカータグとともに使用され、ルートに接続されたコンポーネントをロードします。 RouterLinkは、リンクを生成するために使用されるhref属性を生成します。例えば：
```
import { Component } from '@angular/core';

@Component({
    selector: 'demo-app',
    template: `
        <a [routerLink]="['/login']">Login</a>
        <a [routerLink]="['/signup']">Signup</a>      
        <a [routerLink]="['/dashboard']">Dashboard</a>
        <div>
            <router-outlet></router-outlet>
        </div>
        `
})
export class AnotherComponent { }
```

さて、私たちは静的なパスにルーティングするのが良いです。 RouterLinkは、パスとともに余分なパラメータを渡すことによって、動的パスもサポートします。

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

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class SecondComponent { }

RouterLinkは、最初のパラメータがルーティング用のパスであり、後続の要素が動的ルーティング用のパラメータである配列をとります。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

Angular
ルーティング

サーチ…

子どもとのルーティング

基本的なルーティング