Question

我已经构建了一个angular2 Tabs-Component，并且我想根据当前选择的标签进行路由。

这是我的尝试：

@Routes([
    { path: '/:title', component: TabsComponent }
])
@Component({
    selector: 'customer-app',
    directives: [TabsComponent, Tab, ... ,ROUTER_DIRECTIVES],
    //providers: [TabsComponent],
    template: `
        <router-outlet>
            <tab title="Test 1">
                ...
            </tab>
            <tab title="Test 2">
                ...
            </tab>
        </router-outlet>
    `
})
export class CustomerComponent{}

运行时，我收到错误

错误：未捕获（在承诺中）：EXCEPTION：./ CustomerComponent中出错 class CustomerComponent - 内联模板：2：12原始例外：否 TabsComponent的提供者！

所以我将@Injectable（）添加到TabsComponent并在providers属性数组（代码中的注释行）中进行侦听。

现在，这没有任何错误，但没有被TabsComponent取代。（标签未显示，生成的html中没有<tabs></tabs>但仍然<router-outlet> <tab></tab> ... </router-outlet>）

如何实现TabsComponent实例化并在生成的HTML中作为Component添加？

Answer 1

现在我看到我错过了两点理解路由： 1）子组件需要父路径 2）儿童的内容被丢弃

<router-outlet>不能被组件替换

1 个答案: