부품에 Angular 2 모듈을로드하는 올바른 방법

Question

저는 angular-cli 스타터 키트를 사용하고 있으며 예를 들어 "@ angle/router"모듈을 사용하는 것과 관련하여 질문이 있습니다.

내 app.component.ts에 @angular/router 모듈을 가져오고 이것을 내 app.component.html 파일에 사용했습니다. 모든 것이 작동했습니다. view-header.component.ts과 view-navbar.component.ts과 같은 다른 구성 요소를 만들고 싶었고 [routerLink]을 만들고 싶었을 때 @angular/router 모듈을 다시 추가해야했습니다. 분명히 그것을 사용하는 방법이 아니기 때문에 내 질문을 던질 수 있습니다. 어떻게해야합니까?

물론 이러한 구성 요소에 필수 태그 <router-outlet></router-outlet>을 포함시키지 않았기 때문에 오류가 발생했습니다. 실제로 어떻게해야하는지는 아닙니다.

이

가 app.component.html :

이

<view-header></view-header> 
<view-navbar></view-navbar> 
<router-outlet></router-outlet> 

가 (단지처럼 각 1 NG-포함

업데이트 1

은 결국 나는이 같은 코드를 갖고 싶어 이제는 앵글 2에서 사용 불가).

Answer 1

각도 자신의 웹 사이트에이 솔루션 제안 :

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

import { viewNavbarComponent } from './view-navbar.component'; 
import { viewHeaderComponent } from './view-header.component'; 

@Component({ 
    selector: 'my-component', 
    template: ` 
    <nav> 
     <a [routerLink]="['ViewNavBar']">View navbar</a> 
     <a [routerLink]="['ViewHeader']">View </a> 
    </nav> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
    ROUTER_PROVIDERS 
    ] 
}) 
@RouteConfig([ 
    { 
    path: '/viewNavBar', 
    name: 'ViewNavBar', 
    component: viewNavbarComponent, 
    }, 
    { 
    path: '/viewHeader', 
    name: 'ViewHeader', 
    component: viewHeaderComponent 
    } 
]) 
export class AppComponent { 

} 

을하지만 조심, 현재 라우터가 사용되지 않으며, 어쩌면 방법은 ... 다시 변경

Answer 2

지시로 헤더와 탐색을 정의하고 그것을 써. route config를 사용하여 경로를 구성하십시오.

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

import { viewNavbarComponent } from './view-navbar.component'; 
import { viewHeaderComponent } from './view-header.component'; 

@Component({ 
    selector: 'my-component', 
    template: ` 
    <view-header></view-header> 
    <view-navbar></view-navbar> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES,VIEW_HEADER,VIEW_NAVBAR ], 
    providers: [ 
    ROUTER_PROVIDERS 
    ] 
}) 
@RouteConfig([ 
    { 
    path: '/someView', 
    name: 'SomeView', 
    component: SomeViewComponent, 
    } 
]) 
export class AppComponent { 

}