文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular2路由

问Angular2路由
EN

Stack Overflow用户

提问于 2015-08-19 23:34:54

回答 7查看 2.9K关注 0票数 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>

angular

angular2-routing

回答 7

Stack Overflow用户

发布于 2015-10-31 00:45:04

angular@2.0.0-alpha.41中引入了突破性更改

routerInjectables被重命名为ROUTER_BINDINGS
ROUTER_BINDINGS，然后又被重命名为ROUTER_PROVIDERS

旁白:最近有很多突破性的变化，所以几乎没有一个在线例子是可靠的。

使用 ROUTER_PROVIDERS的

它包括：

RouteRegistry -已定义的routes
LocationStrategy = PathLocationStragety -通过path

匹配路由的注册表

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

为例：

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

bootstrap(App, [ ROUTER_PROVIDERS ]);

资料来源：

票数 7

Stack Overflow用户

发布于 2015-10-15 22:54:34

您可以找到当前最流行的routing 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)
]);

票数 4

Stack Overflow用户

发布于 2016-05-17 16:10:48

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

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的官方文档即可

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32099933

复制

相似问题

问Angular2路由
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2路由EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2路由
EN