标签: angular2-routing

我正在使用angular 2 rc1和新路由器@ angular/router

在应用程序组件中,我有一个导航部分和路由器插座

<nav>   
    <a *ngIf="auth?.userName == null" [routerLink]="['/login']">Login</a>
    <a *ngIf="auth?.userName != null" (click)="logout()">Logout</a>
    {{auth?.userName}}
</nav> 
<router-outlet></router-outlet>

我将一个loginService注入app组件并订阅ngOnInit中的一个事件

ngOnInit() {
    this.loginService.loginSuccess.subscribe(this.loginSuccess);

} 
ngOnDestroy() {
    this.loginService.loginSuccess.unsubscribe();
}
private loginSuccess(res: IAuthResponse) {
    this.auth = res;
}  

当我导航到我的'/ login'路由页面/组件时,我的loginService是inject,loginService定义了一个事件

@Output() loginSuccess = new EventEmitter<IAuthResponse>();

在成功登录我的服务后,登录服务会引发该事件

this.loginSuccess.next(response);

我能够在订阅的loginSucess上的app组件中设置断点,并且数据被传递,但是'this'是未定义的.

private loginSuccess(res: IAuthResponse) {
    this.auth = res;  //this is undefind
} 

如何从在路由器插座中托管的组件中使用的服务触发的事件更新应用程序组件

我正在使用以下文件结构的Angular 2项目.

• HeaderComponent.ts
• AppComponent.ts
• Page1Component.ts
• Page2Component.ts

我在HeaderComponent.ts中有以下模板

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a [routerLink]="['']">Home</a></li>
                <li><a [routerLink]="['/page1']" >Page1</a></li>
                <li><a [routerLink]="['/page2']">Page2</a></li>
            </ul>
        </div>
    </div>
</nav>

在我的AppComponent中使用以下路由

@Component({
    selector: 'my-app',
    template: ` 
            <my-header></my-header>
            <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
@Routes([
    {path: '/', component: HomeComponent},
    {path: '/page1', component: Page1Component}
    {path: '/page2', component: Page2Component}
])
export class …

我有一条路线,我想等到从firebase获取auth对象.这是我的代码:

路线

{
  path: 'random',
  component: RandomComponent,
  resolve: { auth: AuthService }
}

AuthService

@Injectable()
export class AuthService implements Resolve<any> {

  constructor(private af: AngularFire) { }

  resolve(): Observable<any> {
    return this.af.auth.take(1);
  }

}

RandomComponent

export class RandomComponent {

  constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.data);
  }

}

很奇怪它记录Object { },所以一个空对象.如果我将AuthService.resolve更改为return Observable.of('whatever'),那么它会记录Object { auth: "whatever" },所以我很确定这部分代码是有效的,只是因为某种原因,angularfire2 auth observable在这种情况下不起作用.(我真的不是一个可观察的专家,所以可能是我做错了什么).

如果我这样做,this.af.auth.take(1).subscribe(auth => console.log(auth));则记录auth对象,以便该部分也正常工作.

那是什么导致了这个问题呢？我究竟做错了什么？

(使用最新的路由器,angular2和angularfire2.)

我的申请中的路线很少.父路线admin很少有其他子路线posts, about-me, categories.我希望能够访问子路由并在用户想要的情况下导航回去.我试图添加一个链接

<a class="pointer" [routerLink]="['admin']">Back</a>

但是,路由器只是将此链接添加到ActivatedRoute (所以网址看起来像:http:// localhost/admin/posts/admin).

所以我的问题是从儿童路线导航回来的正确方法是什么？先感谢您.

我有一个angular2 RC6应用程序,我需要推迟加载页面,直到执行一些功能.

我有一个服务,确定webApi的URI.我需要应用程序等到这个URL确定后再尝试加载任何数据.如果我在app.component中使用*ngIf隐藏主应用程序,则会出现路由错误,因为路由器插座不存在.

在RC5/6之前,我在服务获取URI后手动引导应用程序.

如何为RouterModule提供服务,以便根据某些参数动态注入路由？

请注意,此参数也是动态的(它来自bootstrapping之前的api调用).

我确实意识到通过使用RouterModule.forRoot(这是一个静态函数),我对注入服务非常有限.

我正在创建一个组件然后它被设置为root组件然后我得到错误Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'.我已经使用RouterLink作为组件anotation中的指令但它无法工作.

app.routes.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { dogRoutes }    from './Dogs/dog.routes';
import { catRoutes }    from './Cats/cat.routes';
import {userRoutes} from "./Users/user.routes";
// Route Configuration
export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dogs',
    pathMatch: 'full'
  },
  ...catRoutes,
  ...dogRoutes,
  ...userRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.component.ts

import { Component } from …

我正在尝试获取应用程序的当前URL，AppComponent但它始终返回根路径/。例如，如果我/users在新标签页中访问，则预期结果应为/users，但是当我在控制台中签入时，显示 /。

但是，当我在子组件中执行相同操作时，它会起作用。下面是我的代码：

import {Component} from '@angular/core'
import {ActivatedRoute, Router} from '@angular/router'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.scss'],
})

export class AppComponent {
    constructor(router: Router) {    
        console.log(this.router.url) // return '/'    
    }
}

那怎么可能？

请帮忙在router.url usging angular上编写单元测试2.请查看下面的代码以了解我的查询.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
    selector: 'app-about',
    templateUrl: './app-about.component.html',
    styleUrls: ['./app-about.component.scss']
})
export class AboutComponent implements OnInit {
    constructor(private router: Router) {
        if (this.router.url.includes('home')) {
            ...some functions
        }
    }
}

这是我的问题。我必须在Angular中设置路由，以便在URL中将有一个国家代码和一种语言。例如

https://example.com/ 美国

棘手的部分是该本地化部分可以更改，因此我有一个按钮可以切换国家和语言，因此它将是/ gb / en或/ usa / fr。

如何使用localize-router和ngx-translate使它像这样工作。

任何帮助，不胜感激。