在组件中加载Angular 2模块的正确方法

时间:2016-06-14 15:39:53

标签: typescript angular

我使用的是angular-cli入门套件,我有一个关于使用例如" @ angular / router"的问题。模块。

在我的app.component.ts我已导入@angular/router模块并在我的app.component.html文件中使用此模块,一切正常。当我想创建一些其他组件,例如view-header.component.tsview-navbar.component.ts,我想在那里做[routerLink]时,我不得不再次添加@angular/router模块。显然,它不是如何使用它的方式,这导致问我的问题 - 我怎么想这样做?。

当然,我遇到了错误,因为我没有在这些组件中包含所需的标记<router-outlet></router-outlet>这意味着它不是我应该怎么做的方式。

更新1

最终我想要一个像这样的代码:

app.component.html:

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

(就像角度1中的ng-include现在在角度2中被禁用)。

2 个答案:

答案 0 :(得分:0)

Angular在他的网站上提出了这个解决方案:

weakSelf

但请注意,目前的路由器已被弃用,也许该方法会再次改变......

答案 1 :(得分:0)

将标题和导航定义为指令并使用它们。并使用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 {

}