Question

我有一个相当简单的Angular 2问题。我有一个主视图，顶部有一个工具栏，右下方有一个路由器插座。

mainView.ts

@Component({
    selector: 'pod-app',
    template: `
        <pod-toolbar></pod-toolbar>

        <router-outlet></router-outlet> <!-- USE THIS router-outlet -->
    `,
    directives: [ ToolbarComponent, RouteComponent, ROUTER_DIRECTIVES ],
    providers: [
        EventService,
        ROUTER_PROVIDERS
    ]
})

@RouteConfig([
    {
        path: '/list',
        name: 'ListView',
        component: ListViewComponent,
        useAsDefault: true
    },
    {
        path: '/tileView',
        name: 'TileView',
        component: TileViewComponent
    },
    {
        path: '/pdfView',
        name: "PdfView",
        component: PdfViewComponent
    }
])

export class MainComponent implements OnInit { 
    ...blah...blah...blah
 }

然后我有我的toolbar.ts嵌套在里面是我的路线导航列表

toolbar.ts

@Component({
    selector: 'pod-toolbar',
    template: `
        <div class="demo-toolbar">
            <p>
                <md-toolbar color="primary">

                    <pod-routes></pod-routes> <!-- appRoutes.ts component -->

                </md-toolbar>
            </p>

        </div>
    `,
    directives: [MdToolbar, MdButton,RouteComponent, ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

export class ToolbarComponent implements OnInit {
    ...blah...blah...blah
}

然后，这是嵌套在工具栏中需要更改mainView中工具栏下方视图的路径链接

appRoutes.ts

@Component({
    selector: 'pod-routes',
    template: 
    `
        <nav>
            <a [routerLink]="['/ListView']"><img src="pathto.png" height="45" width="45"></a>
            <a [routerLink]="['/TileView']"><img src="pathto.png" height="40" width="45" ></a>
            <a [routerLink]="['/PdfView']"><img src="pathto.png" height="40" width="45" ></a>
        </nav>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class RouteComponent{

}

那么，我做错了什么？这是我希望它设置的方式，但如果这是不可行的那么也许我可以将路径移动到工具栏中，如果这是不可行的那么我可以将整个工具栏移动到mainView，我不喜欢我不想这样做，但如果必须，我会。

更新

从appRoutes.ts中删除了ROUTER_PROVIDERS，仍有同样的问题。

更新2

在建议回答时添加'/'到url路由，同样的问题，地址栏中的url发生了变化，但是工具栏下面的ui没有

更新3

从toolbar.ts和mainView.ts文件中删除providers: [ROUTER_PROVIDERS]并在app.ts中引导ROUTER_PROVIDERS

bootstrap(MainComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}) ] )
     .catch(err => console.error(err));

似乎已经完成了这个伎俩。非常感谢Gunter坚持并帮助我解决问题。他的Plunker真的很有帮助！

Answer 1

<强> UPDATE2

Plunker example

<强>更新

使用/作为路径名前缀，告诉根路由器应该导航到此路由：

<a [routerLink]="['/ListView']"><img src="pathto.png" height="45" width="45"></a>
<a [routerLink]="['/TileView']"><img src="pathto.png" height="40" width="45" ></a>
<a [routerLink]="['/PdfView']"><img src="pathto.png" height="40" width="45" ></a>

<强>原始

不要多次提供ROUTER_PROVIDERS

providers: [
    EventService,
    ROUTER_PROVIDERS
]

ROUTER_PROVIDERS应该只在根组件中提供一次，而不是在其他地方提供（或者在boostrap(...)中）

嵌套组件

1 个答案: