标签: angular2-routing

我是Angular的新手.我开始用ver.2.
我需要链接到一个file://...URL.我试过正常href:

注意: app是处理应用程序的Web的模型对象.

<a target="_blank" href="file://{{app.outputPath}}/index.html">no link here</a>.

这不起作用 - 链接在那里,具有正确的URL,但Angular似乎以某种方式阻止事件.为什么？

所以我见过ng-href但是那是Angular 1.x. 而且我所知道的并非*ngHref如此.所以这只是一个天真的尝试:

<a target="_blank" *ngHref="file://{{app.outputPath}}/index.html">over a directive</a>.

此外,我看到了一些路由,但似乎只适用于应用程序中的内部链接:

<a [router-link]="['/staticReport', {path: app.outputPath}]">see the report</a>.

app.component.ts:

@RouteConfig([
    ...
    {path:"/staticReport/:path", redirectTo: 'file://  ???? ' }
])

创建外部链接的方法是什么？

我正在尝试使用嵌套子组件中的按钮切换位于主App模板顶部的侧面导航菜单.我无法弄清楚如何到达父级中的sidenav组件来告诉它sidenav.open().

我知道子组件上的@Input和@Output,但据我所知,要使用它,我需要为子组件添加某种DOM标记来附加它们吗？如:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>

关于如何做到这一点的文章很多.问题是我正在路由到此组件,因此<child>代码中没有明确存在标记.相反,我的代码是这样的:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <router-outlet></router-outlet>
</app>

如果我有一个子组件被路由到,我该怎么做sidenav.open()或以某种方式访问​​孩子的父组件？

一些想法:我已经做了一些研究并思考了几种方法,并且不确定它们是否正确或甚至可以工作......一种方法是使用Injector服务并尝试遍历父母,但这感觉不对:

// child component
constructor(injector: Injector) {
  this.something = injector.parent.get(Something);
}

或者可能在父级中创建一个服务,以某种方式附加到Sidenav组件,然后将此服务注入到子级中？

我正在将一个angular2应用程序迁移到RC2并尝试使用路由器的版本3 alpha.

我也跟着的建立给予plunker由角文档路由但我不断收到以下错误:

/ @ angular/router/index"'没有导出的成员'provideRouter'

/ @ angular/router/index"'没有导出成员'RouterConfig'

尝试在app.router.ts文件中使用以下导入时:

import { provideRouter, RouterConfig } from '@angular/router';

我在visual studio中使用带有commonjs模块格式的typescript.

这是我的packages.json的dependecies

"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "3.0.0-alpha.3",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12"

即使我在我的system.config.js中将angular/route设置为npm cdn,如下所示:

'@ angular/router':' https://npmcdn.com/@angular/router@3.0.0-alpha.3 '

我仍然得到错误.

我甚至尝试使用alpha.4,alpha.5和最新的alpha.6版本.

我尝试删除nodule模块文件夹并强制npm install获取新文件.

题:

有人可以帮我弄清楚为什么导出的memebers提供路由器,RouterConfig无法找到？

谢谢

我刚开始使用Angular 2.

有一个routerLink能够通过配置提供必要的导航路线.

它工作正常,如果它完成如下所示:

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#" [routerLink]="['/home']">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [routerLink]="['/about']">About</a>
    </li>
</ul>

但是在config转发器中使用它会失败,就像这样

<ul class="nav">
    <li class="nav-item" *ngFor="let item of menu">
        <a class="nav-link" href="#" [routerLink]="['{{item.link}}']">{{item.name}}</a>
    </li>
</ul>

我在谷歌搜索得足够多,但我找不到令人满意的答案.

任何帮助表示赞赏!

我有一个注册的组件/contacts,它显示了一个联系人列表.我添加了一个<input [value]="searchString">用于过滤显示列表的内容.

现在我想以searchString查询参数的形式显示URL.(使用新路由器3.0.0 RC2)

官方文档(https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters)显示了如何使用它router.navigate来更改queryParams.但这看起来很尴尬,因为我只是想改变它queryParams而不必知道我目前所处的路线:router.navigate(['/contacts'], {queryParams:{foo:42}})

(我知道如果我只是改变它,它不会重新加载组件queryParams,但是这仍然感觉不对)

经过一番尝试,我发现它router.navigate([], {queryParams:{foo:42}})有效.这感觉好多了.

但我仍然不确定这是不是正确的方法.或者,如果我错过了一些方法.

你怎么改变你的queryParams？

我有角度2的消息传递项目.

路由条件:

1) path: /login , component: LoginComponent
2) path: /inbox , component: InboxMessageComponent
3) path:/inbox/all , "Load InboxMessageListComponent in Right side Box Only",
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"

所以我创建了两个名为app-routing.module.ts和inbox-routing.module.ts的路由模块.

APP-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent},
            { path: 'inbox', component: InboxMessageComponent },
            { path: '', component: InboxMessageComponent },
            { path: '**', component: NotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})

收件箱 - routing.module.ts

@NgModule({
    imports: [
        RouterModule.forChild([
            {path: '/inbox/list',component: InboxMessageListComponent},
            {path: '/inbox/detail/:id',component: …

我写了一个名为"Customer"的模块,它有几个组件,如login,home和register.现在我创建了一个共享模块,它也有两个组件,如页眉和页脚.由于页眉和页脚将由客户模块中的所有组件共享,因此我将它们放在共享模块中.共享模块将导入到客户模块.

现在有一个路由器链接指向客户模块内的组件.那些路由器链接没有被解释为href.但是,如果我将这些页眉和页脚组件直接放在客户模块中,那么这些路由器链接就会得到解释.

我在下面列出了代码段.

共享模块文件

import { NgModule } from '@angular/core';

import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  imports: [ ],
  declarations: [ HeaderComponent, FooterComponent ],
  exports: [ HeaderComponent, FooterComponent ]
})

export class SharedModule { }

客户模块文件

import { NgModule } from '@angular/core';

import { SharedModule } from './shared/shared.module';
import { CustomerRoutingModule } from './customer-routing.module';

import { CustomerComponent } from './customer.component';
import { CustomerHomeComponent } from './home/home.component';
import { CustomerLoginComponent } from './login/login.component';
import …

我需要允许我的应用程序的用户在他们想要的时候更改默认路由:我有一个参数页面,他们可以在登录时选择他们想要首先显示的"页面".

例如,当他们登录时,他们会重定向到Day,但是他们希望能够更改它并在他们登录时的周或月重定向.

  { path: 'planification', component: PlanificationComponent,
   children: [
   { path: '', redirectTo: 'Day', pathMatch: 'full' },
   { path: 'day', component: DayComponent },
   { path: 'week', component: WeekComponent },
   { path: 'month', component: MonthComponent }]
 }

我怎样才能做到这一点？

@ angular/core:2.4.7

@ angular/router:3.4.7

谢谢你的帮助!

我已经创建了一个github存储库,它有一个完美的问题示例.

https://github.com/rjriel/dynamic-route-example

这个回购中代码的重要部分是 app.module.ts

let mainRoutes: Routes = [{
  path: "first",
  component: FirstComponent
}]

mainRoutes.push({
  path: "second",
  component: SecondComponent
})

@NgModule({
...
  imports: [
    RouterModule.forRoot(mainRoutes),

在开发中运行此代码(即.ng serve)时,两个路由都正确导航.但是,在生产中运行此代码(即.ng serve --prod)时second,添加的路由会mainRoutes.push导致以下错误:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'second'
Error: Cannot match any routes. URL Segment: 'second'
    at t.BkNc.t.noMatchError (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.selector (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at …

鉴于以下路线:

path: '',
component: MyComponent,
resolve: {
    foo: FooResolver,
    bar: BarResolver
}

有没有办法告诉angular执行第一个解析器FooResolver,只有BarResolver在第一个解析器完成后才执行第二个解析器？