我创建了具有深子路径的路线.我添加<router-outlet>到AdminComponent组件中,我将其包装到NgModule中.但刷新页面后,我收到此错误:
'router-outlet' is not a known element
也许是因为我忘了将一些模块导入admin.module.ts
请帮忙.谢谢.
app.routes.ts
export const routes: Routes = [
{
path: '',
component: AppComponent,
children: [
{
path: '',
component: LoginComponent
},
{
path: 'admin',
component: AdminComponent
},
{
path: 'user',
component: UserComponent
},
{
path: 'there',
component: ThereComponent
}
]
}
]
app.module.ts
@NgModule({
imports: [
BrowserModule,
AppRoutes,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => {
return new TranslateStaticLoader(http, './src/assets/i18n', '.json')
},
deps: …/如果角度2中不存在路径,我试图重定向404 其他路径
我尝试研究有角度1的一些方法但不是角度2.
这是我的代码:
@RouteConfig([
{
path: '/news',
name: 'HackerList',
component: HackerListComponent,
useAsDefault: true
},
{
path: '/news/page/:page',
name: 'TopStoriesPage',
component: HackerListComponent
},
{
path: '/comments/:id',
name: 'CommentPage',
component: HackerCommentComponent
}
])
所以例如,如果我重定向到/news/page/它然后它工作,它返回一个空页面你如何处理这种情况发生？
我有一个实现CanActivate的AuthGuard(用于路由).
canActivate() {
return this.loginService.isLoggedIn();
}
我的问题是,CanActivate结果依赖于http-get-result - LoginService返回一个Observable.
isLoggedIn():Observable<boolean> {
return this.http.get(ApiResources.LOGON).map(response => response.ok);
}
我如何将它们结合在一起 - 使CanActivate依赖于后端状态？
我正在开发一个具有很多角色的应用程序,我需要使用防护来根据这些角色阻止导航到应用程序的某些部分.我意识到我可以为每个角色创建单独的防护类,但宁愿有一个我可以以某种方式传递参数的类.换句话说,我希望能够做类似的事情:
{
path: 'super-user-stuff',
component: SuperUserStuffComponent,
canActivate: [RoleGuard.forRole('superUser')]
}
但是,既然你传递的只是你后卫的类型名称,就不会想到办法做到这一点.我是否应该咬紧牙关并为每个角色编写单独的防护等级,并在单一的参数化类型中打破我的优雅幻想？
如何从父组件获取RouteParams？
App.ts:
@Component({
...
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/:username/...', component: ParentComponent, as: 'Parent'}
])
export class HomeComponent {
...
}
然后,在中ParentComponent,我可以轻松获取用户名参数并设置子路由.
Parent.ts:
@Component({
...
})
@RouteConfig([
{ path: '/child-1', component: ChildOneComponent, as: 'ChildOne' },
{ path: '/child-2', component: ChildTwoComponent, as: 'ChildTwo' }
])
export class ParentComponent {
public username: string;
constructor(
public params: RouteParams
) {
this.username = params.get('username');
}
...
}
但是,如何在这些子组件中获得相同的"用户名"参数？做与上面相同的技巧,不会这样做.因为这些参数是在ProfileComponent中定义的还是什么？
@Component({
...
})
export class ChildOneComponent {
public …我是一个单元测试用于编辑对象的组件.该对象具有唯一性id,用于从服务中托管的对象数组中获取特定对象.具体id是通过路由传递的参数获得的,特别是通过ActivatedRoute类传递.
构造函数如下:
constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) {
}
ngOnInit() {
this._curRoute.params.subscribe(params => {
this.userId = params['id'];
this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0];
我想对这个组件运行基本的单元测试.但是,我不确定如何注入id参数,组件需要此参数.
顺便说一下:我已经有了Session服务的模拟,所以不用担心.
是否可以在同一个模板中安装多个路由器插座？
如果是,那么如何配置路由？
我正在使用angular2 beta.
假设我当前在具有URL的页面上/user/:id.现在从这个页面我导航到下一页:id/posts.
现在有办法,以便我可以检查以前的URL是什么,即/user/:id.
以下是我的路线
export const routes: Routes = [
{
path: 'user/:id', component: UserProfileComponent
},
{
path: ':id/posts', component: UserPostsComponet
}
];
这有什么不对？我试图让它工作,但我在标题中得到了错误.我已经把它包括<router-outlet></router-outlet>在app.component.html那被templateUrl称为app.component.ts,仍然没有运气.
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TopnavComponent } from './components/navbars/topnav/topnav.component';
import { LeftnavComponent } from './components/navbars/leftnav/leftnav.component';
import { LeftnavsecondaryComponent } from './components/navbars/leftnav-secondary/leftnav-secondary.component';
import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';
@NgModule({
imports: [ BrowserModule, FormsModule, AppRoutingModule ],
declarations: …如何在Angular 2中设置Bootstrap navbar"active"类？我只找到了Angular 1方式.
当我转到" 关于"页面时,添加class="active"到" 关于",然后class="active"在" 主页"上删除.
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['Home']">Home</a></li>
<li><a [routerLink]="['About']">About</a></li></li>
</ul>
谢谢