曾经用于beta / …的工作已经不再适用了.使用新的新RC1路由器,我该如何进行子路由?

文件夹结构

app
  |--home/
  |    |--home.component.ts
  |--login/
  |    |--login.ts
  |--appShell/
  |    |--app.component.ts
  |--apps/
       |--hero/
            |--hero-shell.component.ts  
            |--horees.component.ts 
            |--hero-detail.component.ts

计划的导航是

app.component -> home.component -> heroshell.component -> heroes.component

app.component.ts路线

@Routes([
    { path: '/heroshell',component: HeroShellComponent },{ path: '/home',component: HomeComponent },{ path: '/login',component: Login },])
export class AppComponent implements OnInit {
  title = 'Apps';       
  constructor(public _auth: Authentication,public router: Router,private _dialogService: DialogService
              ) {}      
  ngOnInit() {
    this.router.navigate(['/login']);
  }
  .......

登录成功后,Login类将会

this.router.navigate(['/home']);

从HomeComponent.ts我可以做到

this.router.navigate(['/heroshell']);

到目前为止这么好,没问题.
在hero-shell.component.ts中我有子路由

@Component({
  selector: 'my-app1',templateUrl: 'app/apps/hero/hero-shell.component.html',styleUrls: ['app/appshell/app.component.css'],directives: [ROUTER_DIRECTIVES],providers: [HeroService]
})

@Routes([
    { path: 'heroes',component: HeroesComponent },{ path: 'dashboard',component: DashboardComponent },{ path: 'hero/:_id',component: HeroDetailComponent},])
export class HeroShellComponent { // implements OnInit
  title = 'Hero Sample App';

  constructor(public _auth: Authentication,public router: Router
              ) {} 
}

在hero-shell.component.html中

<my-app1>

<h1>{{title}}</h1>
<!--<button *ngIf="_auth.loggedIn" (click)="onlogout()">logout</button>-->

<nav>
    <a [routerLink]="['dashboard']">Dashboard</a>
    <a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>

</my-app1>

请注意,路径只能是“英雄”.如果我改为[routerLink]并且@Routes改为’/ heroes’则不行.可以帮助解释一下原因吗?

因此它现在可以识别儿童路线.点击routerLink英雄将显示英雄列表.但是当我从HeroesComponent中详细介绍它时

this._router.navigate(['hero/'+hero._id]);

它爆炸了

browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): 
Cannot match any routes. Current segment: 'hero'. 
Available routes: ['/heroshell','/home','/login'].

这很奇怪.如果它无法识别儿童路线,我怎么能首先进入HeroesComponent?现在儿童路线刚刚消失.

如果我使用

this._router.navigate(['hero/'+hero._id],this.currSegment);

它会给出不同的错误

browser_adapter.ts:78 EXCEPTION: 
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration

那么这是否意味着所有子组件必须重复使用@Routes?

Note that the path can only be ‘heroes’. if I change to [routerLink] and @Routes to ‘/heroes’ it won’t work. Can some help explain why?

实际上子路由器中的路径可以包含“/”作为前缀,但将routerLink更改为“/ heroes”使其无效,因为导航路径中的“/”前缀将使用根路由器解析,并且没有“/ heroes”路径. “英雄”路径有效,因为它将使用当前路由器解析,并且您在当前子路由器中定义了该路径.

this._router.navigate([‘hero/’+hero._id]);

使用根路由器将解析在没有段的情况下调用“导航”.这意味着你想做绝对导航.显然这不起作用.

this._router.navigate([‘hero/’+hero._id],this.currSegment);

这也没有用,因为你在HeroesComponent和“英雄”段,组件中没有路由器配置.正确的电话应该是:

this._router.navigate(['../hero',{_id: hero._id}],this.currSegment);

Angular2 RC1子路由已定义但未被识别的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. 详解如何通过H5(浏览器/WebView/其他)唤起本地app

    这篇文章主要介绍了详解如何通过H5(浏览器/WebView/其他)唤起本地app的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

    这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  7. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. HTML5拍照和摄像机功能实战详解

    这篇文章主要介绍了HTML5拍照和摄像机功能实战详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. ios – 在没有iPhone6s或更新的情况下测试ARKit

    我在决定下载Xcode9之前.我想玩新的框架–ARKit.我知道要用ARKit运行app我需要一个带有A9芯片或更新版本的设备.不幸的是我有一个较旧的.我的问题是已经下载了新Xcode的人.在我的情况下有可能运行ARKit应用程序吗?那个或其他任何模拟器?任何想法或我将不得不购买新设备?解决方法任何iOS11设备都可以使用ARKit,但是具有高质量AR体验的全球跟踪功能需要使用A9或更高版本处理器的设备.使用iOS11测试版更新您的设备是必要的.

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部