【问题标题】:angular 2 routing inject into router-outlet not working [duplicate]角度2路由注入路由器插座不起作用[重复]
【发布时间】:2016-05-31 20:40:29
【问题描述】:

我正在努力理解这个路由概念,但无法理解其工作原理。

目前我有一个@routes,它加载一个带有“/”路径的组件。这应该在页面呈现后立即加载。我遇到的问题是......我的组件只有在 html 模板中存在 [routerLink] 时才会加载。

@Component({
  selector: 'my-app',
  template: `    
  <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['/crisis-center']">Crisis Center</a>
      <a [routerLink]="['/heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>`,
  directives: [ROUTER_DIRECTIVES]

})

@Routes([
  {path: '/', component: CoreComponent}
])

***core.component**

import {Component} from '@angular/core';
import { Routes , RouterOutletMap} from '@angular/router';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';

import { SideBarComponent} from './sidebar/sidebar.component';


@Component({
    template: `<side-bar></side-bar>
  <router-outlet></router-outlet>`,
    directives: [SideBarComponent]

})

export class CoreComponent{

}

【问题讨论】:

    标签: routing angular router


    【解决方案1】:

    这是新路由器中的一个已知问题,将予以修复。如果没有routerLink,则根本不会创建路由器实例。或者,您可以将路由器注入根组件。

    【讨论】:

    • 感谢您的快速回答。您在另一个线程中提到在 AppComponent 中注入“Router”。您是否遇到“无法解析路由器的所有参数”错误?
    • 您正在从import { Routes , RouterOutletMap} from '@angular/router'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated'; 导入。您只需要决定其中一个。这两者在任何方面都不兼容。
    • 我在使用 @angular/router 时遇到了错误,我也尝试使用 @angular/router-deprecate 并得到了同样的结果。我很好奇你用的是什么版本。我目前正在使用“@angular/core”:“2.0.0-rc.1”。
    • 您上面的代码同时从两者导入 - 这在任何情况下都是无效的。 router-deprecated 与 beta 版本中的路由器相同。 router 是“新”路由器,目前缺少一些基本功能。
    猜你喜欢
    • 2021-03-13
    • 2018-07-28
    • 2016-12-15
    • 2023-04-01
    • 2017-04-19
    • 1970-01-01
    • 2016-12-30
    • 2017-01-01
    • 2019-10-23
    相关资源
    最近更新 更多