Question

我使用的是angular-cli入门套件，我有一个关于使用例如＆＃34; @ angular / router＆＃34;的问题。模块。

在我的app.component.ts我已导入@angular/router模块并在我的app.component.html文件中使用此模块，一切正常。当我想创建一些其他组件，例如view-header.component.ts和view-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中被禁用）。

Answer 1

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

weakSelf

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

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 {

}

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

2 个答案: