Fatal编程技术网
  • javascript/
  • Javascript Can'；t绑定到'；routerLink'；因为它不是'；这不是已知的本地财产

Javascript Can'；t绑定到'；routerLink'；因为它不是'；这不是已知的本地财产

javascript routing angular

Javascript Can'；t绑定到'；routerLink'；因为它不是'；这不是已知的本地财产,javascript,routing,angular,Javascript,Routing,Angular,是的，这可能是第一百次有人遇到这个问题，但没有解决办法对我有效 我正在使用angular 2.0.0 rc，但没有任何效果，我想我遗漏了一些东西，但我不知道是什么 这是我的文件，它们都可以正确传输，是的，我尝试使用不推荐的路由，是的，我根据文档做了，两者都不起作用 app.component.ts import { Component, OnInit } from '@angular/core'; import {Routes, Router, ROUTER_DIRECTIVES} from '

是的，这可能是第一百次有人遇到这个问题，但没有解决办法对我有效

我正在使用angular 2.0.0 rc，但没有任何效果，我想我遗漏了一些东西，但我不知道是什么

这是我的文件，它们都可以正确传输，是的，我尝试使用不推荐的路由，是的，我根据文档做了，两者都不起作用

app.component.ts

import { Component, OnInit } from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES} from '@angular/router';


import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';

@Component({
    selector: 'my-app',
    template: `
     <h1>{{title}}</h1>
     <nav>
        <a [routerLink]="['/login']">login</a>
        <a [routerLink]="['/home']">home</a>
     </nav>
     <router-outlet></router-outlet>
  `, directives: [ROUTER_DIRECTIVES]
})
    @Routes([
        { path: '/login', component: LoginComponent},
        { path: '/home', component: HomeComponent},
])
export class AppComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['/home']);
    }

}
index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
</head>

<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>


角度2快速入门
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。
其余的文件几乎都是教程中的复制粘贴，所以我不会用更多的代码来垃圾邮件

更新后，我将补充说，由于某些原因，npm日志不会向@angular/routes deprecated/…发送GET请求。。。但他们确实会将其发送到其他模块。 但是，它包含在package.json和systemjs.config.js中

我想我知道问题是什么，但我不确定是什么原因造成的

正如您所见，chrome资产中没有routes文件夹。因此，它不知道这一点是有道理的-但是项目文件中的节点模块在那里，它在systemjs.config.js中指定，就像任何其他模块一样…

因为RC.0将路由器更改为新的实现，这意味着许多在线可用的示例都是旧路由器

如果您使用的是
@RouteConfig
，则是旧路由器。 这就是
@angular/router不推荐的

新路由器使用
@Routes
，可从
@angular/router

否则，
ROUTER\u指令
和
ROUTER\u提供程序
的导入是相同的

发布之间的其他重要更改包括

新路由器不支持命名路由

路线
之前：


import {RouteConfig} from '@angular/router-deprecated';
@RouteConfig([
  {path: '/myroute/:id', component: MyRoute, name: 'MyRoute'}
])



<a routerLink="['MyRoute', {id: 1}]">Link</a>


之后：


import {Routes} from '@angular/router';
@Routes([
  { path: '/myroute/:id`, component: MyRoute }
])



<a routerLink="['/myroute', 1]">Link</a>


路由器链路

routerLink
指令也发生了更改，并且没有将对象作为第二个参数来指定路径变量，例如
id

之前：


import {RouteConfig} from '@angular/router-deprecated';
@RouteConfig([
  {path: '/myroute/:id', component: MyRoute, name: 'MyRoute'}
])



<a routerLink="['MyRoute', {id: 1}]">Link</a>



链接


之后：


import {Routes} from '@angular/router';
@Routes([
  { path: '/myroute/:id`, component: MyRoute }
])



<a routerLink="['/myroute', 1]">Link</a>



链接

Angular需要在属性名称周围添加
[…]
，以指示它是需要解析的绑定。值中的
[…]
仅用于将指定的值解析为数组


<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>



登录
家



这并不能解释您收到的错误消息，因为错误消息表示绑定到不存在的属性，而我的更正是让Angular实际执行绑定。
他们不推荐使用RC2路由器：

我使用了3.0.0-alpha.7版本

根据他们的观点，我还制作了一个app.routes.ts文件：


从'@angular/router'导入{provideRouter，RouterConfig}；
从“./components/bunchOComponents.ts”导入{foomponent，BarComponent，BazComponent}
导出常量路由：路由配置=[
{路径：'foo'，组件：FooComponent}，
{路径：'bar'，组件：BarComponent}，
{路径：“baz”，组件：BazComponent}
];
导出常量应用程序\u路由器\u提供程序=[
供应商外部（路线）
];


然后，我在main.ts文件中使用了以下内容：


从“@angular/platformbrowser dynamic”导入{bootstrap}；
从“./components/AppComponent.ts”导入{AppComponent}；
从“/APP.routes”导入{APP_路由器_提供者}；
引导程序（AppComponent[
应用程序路由器提供商
])
.catch（err=>console.error（err））；



HTH
您正在使用main.ts上的路由器和app.component.ts上不推荐使用的路由器的路由器\u提供程序。尝试在这两个方面都使用不推荐的用户。没有任何区别。只添加一次
路由器\u提供程序
。在您的实际代码中，是
…
不是
…
？因为，1-这是错误的，2-它不会在你的问题中抛出错误，因为没有约束。这意味着错误在其他地方我刚刚克隆了你的回购协议。你的打字脚本代码很好。但是它没有被编译成javascript。只需编译它。另外，在
index.html中添加
，您很高兴我更新了问题，只使用了新的路线，仍然没有任何效果。我尝试了两种方法，都没有效果。。它甚至没有加载@angular/路由器