Question

我有一个app组件，其中定义了路由并设置了<router-outlet></router-outlet>。我还有一个菜单组件，我想使用app路由设置[routerLink]。如何将他们一起购买（共享路线）。应用程序组件：

import {Component, View} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {HomeComponent} from './../../components/home/home';
@Component({
    selector: 'app',
    moduleId: module.id,
    providers: [
        ROUTER_PROVIDERS
    ]
})
@View({
        templateUrl: 'app.html',
        styleUrls: ['app.css']
})

@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }
])
class AppComponent {

}
bootstrap(AppComponent);

菜单组件：

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';


@Component({
    selector: 'left-side-column',
    moduleId: module.id,
})
@View({
    templateUrl: 'left-side-column.html',
    styleUrls: ['left-side-column.css']
})

class LeftSideColumnComponent {

}
bootstrap(LeftSideColumnComponent);

Answer 1

当您使用两次引导功能时，您将创建几个独立的应用程序。

如果您希望您的菜单使用AppComponent中定义的路由，则需要在app app中使用相应的组件并引导它。

类似的东西：

import { MenuComponent } from '...';

@Component({
  (...)
  template: `
    <left-menu></left-menu>
    <router-outlet></router-outlet>
  ` ,
  directives: [ ROUTER_DIRECTIVES, MenuComponent ]
})
export class AppComponent {
}

bootstrap(AppComponent, [ ROUTER_PROVIDERS ]);

Angular 2路由在多个组件中

1 个答案: