Question

为什么这个子路由不起作用？我检查了这个问题A similar issue。我通过将更具体的路线移到第一位来实现给定的解决方案，但这并没有解决问题。

App.component.ts

import {Whatsup} from "./whatsup.component";
    ...
    template:`

    <li id="whatsup" (click)="loadField('whatsup')" ><a [routerLink]="['/whatsup/...']"> Whatsup?</a></li>
    <router-outlet></router-outlet>
    `
    ...

    @Routes([
        {path: '/whatsup/...', component: Whatsup}
    ])

Whatsup.component.ts

    import {Calendar} from "./Calendar.component";

        ...

        template:`
        <li class="list-group-item"><a [routerLink]="['/today']">{{today | date:'EEEEE'}}</a></li>
        <router-outlet></router-outlet>
        `
        ...

@Routes([
    {path:"/today", component: Calendar}
])

Whatsup加载成功，但当我点击Whatsup中的链接时出现此错误：

未处理承诺拒绝：无法匹配任何路线。当前细分：＆＃39;今天＆＃39;。可用路线：[＆＃39; / whatsup /...'，＆＃39; /我们的推荐＆＃39;，＆＃39; / leave-review＆＃39;，＆＃39; / deal-在镇＆＃39;。 ;区域：角;任务：Promise.then;值：对象{message：＆＃34;无法匹配任何路由。当前se ...＆＃34;，堆栈：＆＃34; BaseException @ http://localhost:3000 ...＆＃34; }

Answer 1

在RC.x路由器中不再需要

.fancy-checkbox-label > input[type=checkbox] { position: absolute; opacity: 0; cursor: inherit; } .fancy-checkbox-label { font-weight: normal; cursor: pointer; } .fancy-checkbox:before { font-family: FontAwesome; content: "\f00c"; background: #fff; color: transparent; border: 3px solid #ddd; border-radius: 3px; z-index: 1; } .fancy-checkbox-label:hover > .fancy-checkbox:before, input:focus + .fancy-checkbox:before { border-color: #bdbdff; } .fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before { color: #eee; } input:checked + .fancy-checkbox:before { color: #fff; background: #bdbdff; border-color: #bdbdff; } .fancy-checkbox-img:before { position: absolute; margin: 3px; line-height: normal; } input:checked + .fancy-checkbox-img + img { transform: scale(0.9); box-shadow: 0 0 5px #bdbdff; }，也无法识别。只需删除它：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox"></span>
    A normal checkbox
  </label>
</p>
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox fancy-checkbox-img"></span>
    <img src="http://placehold.it/150x150">
  </label>
</p>

RC.x路由器有几个问题，目前尚不清楚Angular团队将如何进行。如果您开始从/...迁移，那么最好继续使用已弃用的路由器，直到明确路由器故事如何向前推进为止。

{path: '/whatsup', component: Whatsup}

的一些已知问题

确保您将路由器（router-deprecated）注入@angular/router或constructor(router:Router) {}模板包含AppComponent，否则路由器赢了“完全可以调用。
对AppComponent内的路线进行排序，以便更具体的路线首先出现，最不具体的路线最后出现，否则将无法找到第一条路线。

为什么我的子路由无法在angular2中工作？

1 个答案: