logo标签列表

Angular2 路由

angularangular2-routing
7
我正在按照this的Angular路由教程操作，但它不起作用。当我使用“comp”选择器放置HTML代码时，它可以工作，但是当我尝试使用router-outlet进行路由时，它只显示来自index.html的头部。
我有以下内容：

main.ts:

import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
    selector: 'my-app'
})
@ng.View({
    directives: [ng.formDirectives, ng.RouterOutlet],
    template: `
    <nav>
      <ul>
        <li>Start</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
@ng.RouteConfig([{ path: '/', component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent, [ng.routerInjectables]);

comp.ts:

import * as ng2 from 'angular2/angular2';
@ng2.Component({
    selector: 'comp'
})
@ng2.View({
    template: `
    <h1>hi<h1>
  `
})
export class Comp {
    constructor() {
    }
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test3</title>
    <script src="lib/traceur/traceur.js"></script>
    <script src="lib/system.js/dist/system.js"></script>
    <script src="lib/angular2-build/angular2.js"></script>
    <script src="lib/angular2-build/router.dev.js"></script>
    <script>
        System.config({
            packages: { 
                'js': {
                    defaultExtension: 'js'
                } 
            }
        });
        System.import('/js/main');
    </script>
</head>
<body>
    <h1>Hello There</h1>
    <my-app></my-app>
</body>
</html>

你已经在 router.dev.js 文件中添加了注释 D: ! - Eric Martinez
你说得没错，但那不是最新的版本。我不小心发布了一个旧版本。 - user265732
看看这个例子，看看导入（的模块）。你用的是哪个版本？ - Eric Martinez
我这里有一个可工作的示例：http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0。 此外，这里还有代码的实时演示：http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples。 - TGH
7个回答
7

自 angular@2.0.0-alpha.41 版本起，出现了一些重大变更。

  • routerInjectables 更名为 ROUTER_BINDINGS

  • ROUTER_BINDINGS 随后又更名为 ROUTER_PROVIDERS

附言：最近有很多重大变更，因此在线示例几乎都不可靠。

使用 ROUTER_PROVIDERS

它包括：

  • RouteRegistry - 定义路由的注册表
  • LocationStrategy = PathLocationStragety - 通过路径匹配路由

这基本上是使用默认设置启动 Router 的快捷方式。

例如：

@Component ({
...
})
@View ({
...
})
@RouteConfig ({
...
})
class App {}

bootstrap(App, [ ROUTER_PROVIDERS ]);

Sources:

4

您可以在这里找到目前最流行的路由工作示例。

查看app/app.ts：

import {Component, bind, bootstrap, ViewEncapsulation} from 'angular2/angular2';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_BINDINGS,
  ROUTER_PRIMARY_COMPONENT
} from 'angular2/router';

import {Home} from './components/home/home';
import {About} from './components/about/about';
...
@Component({ /// your root component
})
@RouteConfig([
  { path: '/', component: Home, as: 'Home' },
  { path: '/about', component: About, as: 'About' }
])
class App {}

bootstrap(App, [
  ROUTER_BINDINGS,
  bind(ROUTER_PRIMARY_COMPONENT).toValue(App)
]);
顺便提一下，Route.as 参数已更改为 Route.name。https://github.com/angular/angular/commit/7d83959be56780b1ba9cf7efb6cd96452bec2761。除此之外，这是一个很好的例子 +1。 - Evan Plaice
2

您正在学习的教程最终指出它已被弃用，您可以在粗体中阅读：

Deprecation Note

We are very sorry, but this article is out of date and has been deprecated. Usually, we keep our articles up to date, however, with this one it's very likely that we've written a complete new version.

如果您想使用路由组件，我建议您更新Angular 2版本。请注意，RC中的许多设置已更改，因此您可能需要从官方网站重新设置配置并进行一些更改。

另一个用户遇到了类似您的问题，在这里，通过升级版本解决了该问题。只需升级版本、修复配置，然后使用此处的官方文档。

1

可能已经太晚回答了，但是读完整个回答是值得的，请试一试：P

  • View 在 Angular2 中已经不再使用，如果仍然使用 @view 注解可能会导致某些错误。因此，只有组件是将保存所有选项的位置。

根据官方消息，在 beta.10 版本中已经弃用了 @View 元数据装饰器。

  • 在 Angular2 中进行与路由相关的操作时需要使用 ROUTER_DIRECTIVES。通过在指令列表中注入 ROUTER_DIRECTIVES，你的组件可以自动获得用于路由的 routerLink 和 router-outlet 属性。你可以在应用程序启动时注入 ROUTER_DIRECTIVES 而不是在每个组件的指令列表中注入。

发布有关路由的一些有用回答的链接，而不是发布整个回答，请参见此处 -

0
尝试将路径中的 / 删除，如下所示： @ng.RouteConfig([{ path: "", component: Comp }])。
您不需要在路由配置中指定斜杠。
-1
Angular2路由器已经有了惊人的发展，对于那些仍然困在旧教程中的人们，这些教程没有反映出变化，请准备好迎接巨大的惊喜。我建议你们看一下我的inventman项目，它处于angular2的前沿。我不是在推广它，因为它是一个闭源项目。但你可以从中获得关于路由和几乎所有angular2原则的想法。与其他教程不同，它是一个完整的工作项目。

https://github.com/debanjanbasu/inventman

-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接