标签: angular2-routing

我不知道角度的基本原理,特别是关于测试的理论,足以知道我是否应该更喜欢router.navigate()在组件或服务中使用.

例如,假设您有一个LogInComponent管理您的登录表单和一个AuthService处理与服务器通信的人.当用户成功登录时,您希望将它们从登录屏幕重定向到应用程序的主页.最好是这样做LogInComponent还是AuthService？

嗨,我试图用实际的方式定义Angular 2路径路径.

我有一个返回路径的服务,所有路径都使用一个公共组件进行路由

服务如下所示(所有路径都是动态生成的)

export class PagesService{
    getPages() :string[] {
        return  [{"slug": 'john',"name": 'John'},{"slug": 'martin',"name": 'Martin'},{"slug": 'alex',"name": 'Alex'},{"slug": 'susan',"name": 'Susan'}]
    }
}

路由组件,

@Component({
    selector : 'app',
    template :  `
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/', name: 'Home', component: HomeComponent}
])
export class RouteComponent{
    constructor(private _pageService: PagesService){
        this.pages = this._pageService.getPages()
    }
}

有没有像*ngFor这样的方法可以用来pages 在RouteConfig装饰器内循环？

我想得到路线配置,

就像是,

{path: '/{{page.slug}}', name: '{{page.name}}', component: PersonComponent}

谢谢

我用routerLink声明了一个div.在以前的版本中,这是有效的.现在(@ angular/router 3.0.0-alpha.3)它无法正常工作.

有谁知道解决方案？

<a class="my-item" [routerLink]="['/hero']">...</a>

工作,但后来我需要更新我的风格.

browser_adapter.ts:78 EXCEPTION:模板解析错误:
无法绑定到'href',因为它不是已知的本机属性("
[ERROR - >]

我在angular2中启动了一个项目，但是由于某种原因，我的路线两次显示了我的组件。这是相关的代码片段。

应用程序路由

// Some import 
import { AuthComponent } from './master/auth';

const appRoutes: Routes = [
  {
    path: 'master/registration',
    component: AuthComponent
  }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { AuthComponent } from './master/auth/auth.component';

import { AppComponent } from './app.component';
import { routing } from './app.routing';

@NgModule({
  declarations: [
    // components
    AuthComponent
 ],
 providers: [
 // some providers
 ],
 imports: [
    BrowserModule,
    ReactiveFormsModule,
    routing
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.html包含<app-auth></app-auth>

auth.component.ts

import { …

我使用一个简单的链接导航到另一个页面,使用HashLocationStrategy:

<a href="/#/mypage">My Page</a></div>

在点击上面的链接之后,mypage正在加载,但是由于我向下滚动上一页,它被加载到页面的中间(上一页的相同滚动位置).

我有一个解决方法,但为什么会发生这种情况？

我有两个组件,我想使用路由参数从一个变量发送到另一个.在我的第一个组件中,我使用此函数发送id:

sendId(id : string) : void {
    this.router.navigate(['/component2', id]);
}

我的路由模块如下所示:

const routes: Routes = [
 { path: 'component2/:id', component: Component2},
 { path: '**', redirectTo: '' }
];

@NgModule({
 imports: [ RouterModule.forRoot(routes) ],
 exports: [ RouterModule ]
})

export class AppRoutingModule {}

在我的第二个组件中,我试图像这样读取它:

import { Router, ActivatedRoute, Params } from '@angular/router';

export class Component2 implements OnInit {
   id: string;

constructor(private router: Router, private route: ActivatedRoute) {
}

ngOnInit() {
    this.route.params.subscribe(params => { this.id = +params['id']; 
    });

    console.log(this.id);
}

但我收到一个空值.我错过了什么？

我有一个侧边栏,你可以在外面点击或在酒吧内的X里面关闭.但是我需要在更改路线时自动关闭(例如从Home到About或Contacts保持打开状态,但我需要它已折叠)

<md-toolbar class='toolbar' color="primary" >

  <button md-icon-button (click)="nav.open()">
    <md-icon class="md-24">menu</md-icon>
  </button>


</md-toolbar>

<md-sidenav-container>

  <md-sidenav #nav>
        <md-nav-list>
  <button md-icon-button (click)="nav.close()">
    <md-icon class="md-24">close</md-icon>
  </button>
      <a md-list-item routerLink='home'class="active"> Home </a>

      <a md-list-item routerLink='about' class= "page-scroll" > About us</a> 
    <a md-list-item routerLink='discount' class= "page-scroll" >Discounts </a>
    <a md-list-item routerLink='contact'class= "page-scroll" >Contact </a>
       <a md-list-item routerLink='order' class= "page-scroll" >Order</a>...


    .md-toolbar {
padding-top: 1em;
align-self: flex-start;
height:5em;


}


.toolbar{

  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;


}


md-nav-list{
     margin-left: 20px;
  margin-right: …

我有一个路由设置到电台节目时间表,我传递给的参数ScheduleComponent是日期.但是,我在尝试为路径设置默认值时遇到问题.

在经历了很多失败之后,我决定总是在链接上设置日期.但现在我需要突出显示.active路线,因此需要弄清楚如何设置计划的默认值.

有人可以帮助我指出正确的方向.

目前的路线:

const routes = [
    {
        path: 'schedule/:date',
        component: ScheduleComponent,
    }
]

我正在考虑做这样的事情,但无法安排在给定日期前往正确的地方.我不确定这是正确的方法:

const routes = [
    {
        path: 'schedule',
        component: ScheduleComponent,
        redirectTo: 'schedule/yyyy-MM-dd', // Replacing yyyy-MM-dd with todays date.
        children: [
            { path: ':date', component: ScheduleComponent, pathMatch: 'full' }
        ]
    }
]

主导航构造器,这是我想要使用的地方/schedule:

  constructor(private datePipe: DatePipe, private colorService: ColorService) {
    this.navs = [
      {url: '/schedule/' + this.datePipe.transform(new Date(), "yyyy-MM-dd"), content: "Schedule"},
      // ... other routes
    ];

示例链接:

<a [routerLink]="['/schedule', day …

更新联系后我将显示一条消息,在1500ms后我将路由到另一页.我是这样做的:

onSubmit() {
    if (this.form.valid) {            
        this.contactService.updateContact(this.contact).subscribe(response => {
            this.contactUpdated = true;
                Observable.interval(1500)
                  .subscribe(i => { 
                    this.router.navigate(['/commit']); 
                 })
              });
            }
          }

这只能工作一次,在我用鼠标导航到另一个菜单后,我将自动路由回提交路径.有谁知道我做错了什么？

这是我的路线：

{ path: 'market/:currency', component: MainlayoutComponent, canActivate: [AuthGuard]}

我想重定向到这样的查询参数：

市场/ btc？sidebar = home

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar: 'home'}"></a>

但是当我单击其重定向市场/ BTC

有什么问题。

编辑中

这段代码有效，我还有另一个错误，但我解决了。