angular - Angular2 路由

Question

我一直在关注这个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]);

比较：

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

索引.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>

score 7 · Accepted Answer

引入了重大变化angular@2.0.0-alpha.41

routerInjectables改名为ROUTER_BINDINGS
ROUTER_BINDINGS然后改名为ROUTER_PROVIDERS

旁白：最近发生了很多重大变化，因此几乎没有一个在线示例是可靠的。

利用ROUTER_PROVIDERS

这包括：

RouteRegistry- 已定义路线的注册表
LocationStrategy = PathLocationStragety- 按路径匹配路线

这基本上是使用默认设置引导路由器的快捷方式。

例如：

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

bootstrap(App, [ ROUTER_PROVIDERS ]);

资料来源：

score 4 · Accepted Answer

您可以在此处找到当前最流行的路由工作示例

查看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)
]);

score 2 · Accepted Answer

在您正在关注的教程中，他们最终声明它已被弃用，您可以以粗体阅读：

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 中的许多设置已更改，因此您可能需要从官方站点再次设置配置并进行少量更改。

另一个用户在这里遇到了与您类似的问题，并且升级问题得到了解决。只需升级版本，修复配置并从此处使用此官方文档

score 1 · Accepted Answer

回答可能为时已晚，但对阅读整个答案感到愤怒，试一试：P

View在 angular2 中不再存在，如果您使用的是仍然@view注释，它可能会导致产生某种错误。所以只有组件是保存所有选项的地方。

根据官方的说法，@View 元数据装饰器在 beta.10 版本中已被弃用。

ROUTER_DIRECTIVES当你在angular2中做与路由相关的事情时需要。通过注入ROUTER_DIRECTIVES指令列表，routerLink以及router-outlet路由所需的属性自动提供给您的组件。您可以ROUTER_DIRECTIVES在引导您的应用程序时注入，而不是每次都在每个组件的指令列表中注入。

而不是将整个答案发布链接发布到与路由相关的一些有用答案，另请参见此处 -

score 0 · Accepted Answer

尝试删除路径中的 / 如下：@ng.RouteConfig([{ path: "", component: Comp }])。

您无需在路由配置中指定斜杠。

score -1 · Accepted Answer

angular2 路由器已经取得了惊人的发展，对于那些仍然坚持未反映变化的旧教程的人来说，已经准备好迎接巨大的惊喜。我建议你们看看我的 inventman 项目，它处于 angular2 的前沿。我不是在推广它，因为它是一个闭源项目。您可以从中获得有关路由和几乎所有 angular2 原则的想法。与其他教程不同，它是一个成熟的工作项目。

https://github.com/debanjanbasu/inventman

score -1 · Accepted Answer

由于您没有提供错误消息，这里有一个工作示例https://github.com/ajtowf/ng2_play和视频教程https://youtu.be/ZsGRiHSaOxM

angular - Angular2 路由

7 回答 7

Related

Reference