我使用的是angular-cli入门套件,我有一个关于使用例如" @ angular / router"的问题。模块。
在我的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中被禁用)。
答案 0 :(得分:0)
Angular在他的网站上提出了这个解决方案:
weakSelf
但请注意,目前的路由器已被弃用,也许该方法会再次改变......
答案 1 :(得分:0)
将标题和导航定义为指令并使用它们。并使用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 {
}