Angular2中的路由 – 链接“[‘Name’]”无法解析为终端指令

我正在尝试一个简单的应用程序工作与子路由。

当我在我的子组件上设置路由时，会收到以下错误消息：

Link "["ChildItem"]" does not resolve to a terminal instruction

如果我将所有路由放在父组件上，它可以正常工作。如果我拆分子组件和父组件之间的路由，我得到上面的错误。

这是与同一组件上的所有路由协同工作：

import {bootstrap} from 'angular2/platform/browser';
import {Component,provide} from 'angular2/core';
import {COMMON_DIRECTIVES,CORE_DIRECTIVES,FORM_DIRECTIVES,NgFor,NgIf} from 'angular2/common';
import {ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteConfig,RouterLink,RouterOutlet,Route,LocationStrategy,HashLocationStrategy} from 'angular2/router';


@Component({selector: 'subItem1',template: `SubItem1`})export class SubItem1{}
@Component({selector: 'subItem2',template: `SubItem2`})export class SubItem2{}
@Component({selector: 'subItem3',template: `SubItem3`})export class SubItem3{}

@Component({
    selector: 'childItem',directives: [COMMON_DIRECTIVES,ROUTER_DIRECTIVES,RouterLink],template: `<h2>Child Item</h2>
    <ul>
    <li><a [routerLink]="['/SubItem1']">SubItem1</a></li>
    <li><a [routerLink]="['/SubItem2']">SubItem2</a></li>
    <li><a [routerLink]="['/SubItem3']">SubItem3</a></li>
    </ul>
    `
})  
export class ChildItem{}


@Component({
    selector: 'home',template: `<h2>Home page</h2>
    <a [routerLink]="['/ChildItem']">Click Me</a>`
})
export class Home{}


@Component({
  selector: 'my-app',template: `<h1>Routing Test</h1>
  <router-outlet></router-outlet>`,directives: [ROUTER_DIRECTIVES,RouterOutlet]
})
@RouteConfig([
        { path: '/',component: Home,as: 'Home' },{ path: '/child',component: ChildItem,as: 'ChildItem' },{ path: '/child/1/',component: SubItem1,as: 'SubItem1' },{ path: '/child/2/',component: SubItem2,as: 'SubItem2' },{ path: '/child/3/',component: SubItem3,as: 'SubItem3' }
])
export class AppComponent {}

    bootstrap(AppComponent,[ROUTER_PROVIDERS,provide(LocationStrategy,{ useClass: HashLocationStrategy })])

以下是单独组件的路由，在查看Child Compoent时出现错误：

import {bootstrap} from 'angular2/platform/browser';
import {Component,template: `<h2>Child Item</h2>
    <ul>
    <li><a [routerLink]="['/SubItem1']">SubItem1</a></li>
    <li><a [routerLink]="['/SubItem2']">SubItem2</a></li>
    <li><a [routerLink]="['/SubItem3']">SubItem3</a></li>
    </ul>
    `
})
@RouteConfig([
        { path: '/1',{ path: '/2/',{ path: '/3/',as: 'SubItem3' }
])
export class ChildItem{}


@Component({
    selector: 'home',{ path: '/child/...',as: 'ChildItem' }
])
export class AppComponent {}

bootstrap(AppComponent,{ useClass: HashLocationStrategy })])

的index.html

<html>
  <head>
    <title>Child Routing</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="../node_modules/angular2/bundles/router.dev.js"></script>
    <script src="../node_modules/rxjs/bundles/rx.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}},baseURL: '/src'
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

packages.json

{
  "name": "angular2-forms","version": "1.0.0","description": "","main": "index.js","scripts": {
    "tsc": "tsc -p src -w","start": "live-server --open=src"
  },"keywords": [],"author": "John Tindell","license": "ISC","dependencies": {
    "angular2": "2.0.0-beta.0","es6-module-loader": "0.17.8","systemjs": "0.19.8","es6-shim":"0.33.3","rxjs": "5.0.0-beta.0"
  },"devDependencies": {
    "live-server": "^0.9.0","typescript": "^1.7.3"
  }
}

这可能对其他用户有用，所以我把它写成aswer，评论可能太短。

在您的RouteConfig中，您将ChildItem定义为父路由。 / …部分使它成为父路由，这意味着它有孩子。

@RouteConfig([
        // This route is a parent route
        { path: '/child/...',as: 'ChildItem' }
])

因此，您不能简单地路由到[‘ChildItem’]，而不指定子路由，或者不在路由中添加useAsDefault：true。

所以你有两个选择：

>选项1：在您的一条子路径中添加useAsDefault：true

@RouteConfig([
        { path: '/1',as: 'SubItem1',useAsDefault: true},as: 'SubItem3' }
])
export class ChildItem{}

使用此选项，每次导航到ChildItem时，它将立即重定向到SubItem1。注意：在以前已经弃用了，坚持命名。

>选项2：在链接中指定一个小孩(你可以通过两种方法来做到这一点)

// First way
<a [routerLink]="['/ChildItem','SubItem1']">Click Me</a>

// Second way
<a [routerLink]="['/ChildItem/SubItem1']">Click Me</a>

两种方式都是相似的，但是第一种方法可以让你将参数传递给每个路由，例如：

// ChildItem gets "id"
// SubItem1 gets "itemName"
<a [routerLink]="['/ChildItem',{id: 'someId'},'SubItem1',{itemName: 'someName'}]">Click Me</a>

// Only SubItem1 gets "id"
<a [routerLink]="['/ChildItem/SubItem1',{id: 'someId'}]">Click Me</a>

我希望这是有帮助和明确的。

Angular2中的路由 – 链接“[‘Name’]”无法解析为终端指令

猜你在找的Angularjs相关文章