Angular => 라우팅

어린이와의 연결

app.routing.ts 또는 app.module.ts 파일 내에서 자녀 경로를 올바르게 중첩시키는 방법임을 알게되었습니다 (환경 설정에 따라 다름). 이 접근법은 WebPack 또는 SystemJS를 사용할 때 작동합니다.

아래의 예는 home, home / counter 및 home / counter / fetch-data에 대한 경로를 보여줍니다. 첫 번째 및 마지막 경로는 리디렉션의 예입니다. 마지막으로 예제를 끝내면 Route를 내보내 별도의 파일로 가져 오는 적절한 방법이 있습니다. 예를 들어. 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 에서 imports 에서 @NgModule([]) 아래에 배치하십시오.

// 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
라우팅

수색…

어린이와의 연결

기본 라우팅