Question

我正在关注Angular中的this路由教程，但它不起作用。当我使用＆＃39; comp＆＃39;它可以使用它的HTML代码选择器，但是当我尝试使用路由器插座进行路由时，它只会显示来自index.html的标头。

我有以下内容：

main.ts：

＆＃13;

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

＆＃13;

comp.ts：

＆＃13;

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

＆＃13;

的index.html：

＆＃13;

<!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>

＆＃13;

Answer 1

在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 ]);

来源：

Answer 2

您可以找到当前最受欢迎的路由here

的工作示例

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

Answer 3

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

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中有相当多的设置已更改，因此您可能需要从官方网站再次设置配置并进行一些更改。

另一位用户遇到了与您here类似的问题，并且升级问题已解决。只需升级版本，修复配置并使用here

中的官方文档即可

Answer 4

可能为时已晚，无法回答，但是读完整个答案，试一试：P

View在angular2中不再存在，如果您使用静态@view注释，则可能会导致产生某种错误。所以只有组件才能容纳所有选项。

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

ROUTER_DIRECTIVES需要。通过在指令列表中注入ROUTER_DIRECTIVES，可以自动将组件用于路由所需的routerLink和router-outlet属性。您可以在引导应用程序时注入ROUTER_DIRECTIVES，而不是每次都在每个组件的指令列表中注入。

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

Answer 5

尝试删除路径中的/，如下所示： @ ng.RouteConfig（[{path：＆＃34;＆＃34;，component：Comp}]）。

您不需要在路线配置中指定斜杠。

Answer 6

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

Answer 7

angular2路由器已经发展得非常出色，因为那些仍然坚持使用未反映变化的旧教程的人都可以为大量的惊喜做好准备。我建议你们看看我的发明人项目，这是在angular2的最前沿。我不是在推广它，因为它是一个封闭源项目。您可以从中获得有关路由的想法以及几乎所有的angular2原则。与其他教程不同，它是一个完整的工作项目。

https://github.com/debanjanbasu/inventman

Angular2路由

7 个答案: