Angular 2在多个组件中布线

Angular 2 Routing in more then one component

本文关键字：组件 布线 Angular      更新时间：2023-11-06

我有一个应用程序组件，其中定义了路由并设置了<router-outlet></router-outlet>。我还有一个菜单组件，我想在其中使用应用程序路由设置[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);

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

如果你想让你的菜单使用AppComponent中定义的路由，你需要将相应的组件使用到应用程序中并引导它。

类似于：

import { MenuComponent } from '...';
@Component({
  (...)
  template: `
    <left-menu></left-menu>
    <router-outlet></router-outlet>
  ` ,
  directives: [ ROUTER_DIRECTIVES, MenuComponent ]
})
export class AppComponent {
}
bootstrap(AppComponent, [ ROUTER_PROVIDERS ]);
相关文章：