标签: angular2-routing

我正在尝试根据 URL 中的子域在 Angular2 路由器中进行路由。例如，如果有人请求 test.domain.com，那么他们会得到“test”路由。我无法在不设置超时延迟的情况下让 router.navigate 从 ngOnInit 工作，但是从构造函数运行以下内容是可行的。如果有更清洁的解决方案会感兴趣吗？

{path: 'test',                    component: TestComponent}

this._router.events.subscribe(event => {
 if (event.constructor.name === 'NavigationEnd'
     && window.location.hostname == 'test.domain.com'
     && event.url == '/') {
       console.log(event.url);
       this._router.navigate(['test']);
     }
 });

考虑以下示例：

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

当当前 URL 为“/user”或“/user/bob”时，active-link CSS 类将被添加到 a 标签中，

我如何强制执行完全匹配？

尝试使用组件中的路由器对象通过代码导航到子视图时遇到问题：

this.router.navigate(['./details']); //Error: Cannot match any routes: 'details'

但是在我使用 routerLink 的模板中，它可以工作： 测试我我需要做同样的事情，但在使用 router.navigate 方法的组件中。我的组件显示在 routerOutlet 的另一个组件中，我有以下子路由配置：

export const HOME_ROUTES: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [{path: '',outlet: 'route1',component: DashboardComponent,pathMatch: 'full'},
    {
        path: 'dashboard',
        outlet: 'route1',
        component: DashboardComponent
    },
    {
        path: 'tasks',
        outlet: 'route1',
        component: TasksComponent,
        children: [
            { path: '',component: TasksListComponent,pathMatch: 'full'},
            { path: 'list',component: TasksListComponent},
            { path: 'details', component: TasksDetailsComponent },
            { path: 'view', component: TasksListComponent },
        ]
      }
    ]
  }
];

我正在尝试从 TasksListComponent 显示 TasksDetailsComponent，我的相对 …

ActivatedRoute字段是 Observables。例如，我们想要获取 id 参数或仅获取 URL 的第 n 段。我们使用 Observables 代替简单的映射或数组。这是过度使用异步还是出于某种目的真的需要？

我想在子路由中使用相同的数据，但我找不到访问父路由数据的方法。也就是说，现在我有：

{ path: 'parent-path', component: parentComponent, children: [
    { path: 'child1', component: child1Component,
      data: { sharedData: 'sharedData', child1Data: 'child1Data' }},
    { path: 'child2', component: child2Component,
      data: { sharedData: 'sharedData', child2Data: 'child2Data' }},
    { path: 'child3', component: child3Component,
      data: { sharedData: 'sharedData', child3Data: 'child3Data' }}          
]}

我想要的是不必在所有孩子中重复相同的 sharedData。我试过这个：

{ path: 'parent-path', data: { sharedData: 'sharedData'}, component: 
  parentComponent, children: [
    { path: 'child1', component: child1Component,
      data: { child1Data: 'child1Data' }},
    { path: 'child2', component: child2Component,
      data: { child2Data: 'child2Data' }},
    { path: …

ConfigService在 angular 应用程序引导之前，我写了一篇文章来获取配置详细信息。

下面的代码写在app.module.ts这个代码工作正常，我能够在应用程序加载之前加载配置。

...
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: configServiceFactory,
        deps: [ConfigService],
        multi: true
    }
]
...

但是，现在我想将有效负载传递给我必须从查询参数中读取的配置 API。

我尝试了以下但它抛出

...
@Injectable()
export class ConfigService {

    private _configData: any;

    constructor(
        private _http: Http,
        private _activatedRoute: ActivatedRoute
) {
}
...

如何读取 APP_INITIALIZER 服务中的查询参数？

使用最新版本的 Angular 我有一个非常小、简单的应用程序 - 见下文：

预测详细信息组件如下所示：

public getForecastData(forecastId) : Observable<any> {
  return this.http.get<any>('/api/forecasts/' + forecastId + '/data');
}

ngOnInit() {
  this.route.paramMap
    .switchMap(
      params => {
        return this.getForecastData(params.get('id'))
      })
})
.subscribe( (data) => {
  // business logic here
});

我遇到的问题是，如果 getForecastData 调用失败（服务器返回 500），则对路由器 paramMap observable 的订阅似乎丢失了。我尝试导航到不同的预测，但未调用 getForecastData 方法。

我想我需要某种错误处理，但我需要在哪里处理？除非我需要返回另一个 Observable，否则在订阅中添加错误调用似乎不起作用？

这基本上是从 Angular 站点上的教程改编而来，但是他们返回了一个带有静态数据的 Promise 并且非常坚持快乐的道路。

如何在 Angular 中返回两次？

我有一个案例，用户可以导航到视图 A，然后导航到视图 B，然后再到视图 C，从视图 C，用户可以单击浏览器返回，但不是导航到视图，BI 想要导航到视图 A。

在 Angular 中是否有任何选项可以做到这一点？我正在使用角度路由器。

Per Angular ( https://angular.io/api/core/OnInit表示ngOnInit 在第一次检查指令的数据绑定属性之后被调用，并且在它的任何孩子被检查之前被调用。它被调用仅在指令实例化时一次。），

所以 ngOnInit 应该被调用一次，但如plunker所示（这是来自https://angular.io/tutorial/toh-pt5的副本），我只修改了 app/heroes/heroes.component.ts和 app/dashboard /dashboard.component.ts有 console.log

并且打开F12（开发者工具）时，控制台会在路由改变时重复显示日志。

我看看 为什么 ngOnInit 调用了两次？, Constructor 和 ngOnInit 的区别, Angular 2 App Component ngOnInit 在使用 iframe 时调用两次, ngOnInit 每次更改路由时调用

但不明白为什么每次都调用 ngOnInit。

console.log("ngOnInit in All Heroes");
console.log("ngOnInit InDashBoard");

我已经设置了如下所示的延迟路由，

const appRoutes : Routes = [
{ path : '' , redirectTo : '/posts' , pathMatch:'full' },    
{ path : 'posts',  component:PostsComponent ,  children: [
    {path : 'contact' , component : ContactComponent },
    {path : ':slugurl' , component : SinglepostComponent }, 
    {path : 'category/:category' , component : PostfeedComponent },   
    {path : '' , component : PostfeedComponent },             
]},
{ path : 'about', loadChildren : './aboutme/aboutme.module#AboutmeModule' },    
{ path : 'admin',  loadChildren: './admin/admin.module#AdminModule' , canActivate: [ AuthGuard ] },  
{ …