我在Angular 2 (alpha版本49)中有这样的组件:
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
LocationStrategy, HashLocationStrategy} from 'angular2/router';
@RouteConfig([
{path: '/DeleteProduct', as: 'DeleteProduct', component: DeleteProduct}
])
@Component({
selector: 'app'
})
@View({
directives: [ROUTER_DIRECTIVES],
template: `
<div>
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a [router-link]="['/DeleteProduct']">Add/Delete</a></li>
</ul>
</div>
</div>
</nav>
<div>
<router-outlet></router-outlet>
</div>
</div>
`
})
export class App {
}
工作得非常好。今天我将角度版本升级为 2.0.0-beta.0 。现在上面的代码失败了消息:
Can't bind to 'router-link' since it isn't a known native property ("collapse-1">
. . .
App@10:23
at new t (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:6:5082)
at e.parse (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:4350)
at http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20295
at Zone.run (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:138:17)
at Zone.run (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:4:14657)
at zoneBoundFn (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:111:19)
at lib$es6$promise$$internal$$tryCatch (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1511:16)
at lib$es6$promise$$internal$$invokeCallback (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1523:17)
at lib$es6$promise$$internal$$publish (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1494:11)
at http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:243:5
-----async gap-----
Error
at _getStacktraceWithUncaughtError (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26)
at Zone.fork (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40)
at Zone.bind (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:109:48)
at bindArguments (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:980:29)
at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37)
at e._compileComponentRuntime (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20236)
at e.componentTemplateFactory (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20935)
at e.createBeginComponent (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:15:2637)
at e.visitElement (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:15:6099)
at e.visit (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:14:23018)
-----async gap-----
Error
at _getStacktraceWithUncaughtError (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26)
at Zone.fork (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40)
at Zone.bind (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:109:48)
at bindArguments (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:980:29)
at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37)
at e._compileComponentRuntime (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:20236)
at e.compileHostComponentRuntime (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:19425)
at t.compileInHost (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:18:24265)
at t.loadAsRoot (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:7604)
at g.provide.useFactory (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:11883)
-----async gap-----
Error
at _getStacktraceWithUncaughtError (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26)
at Zone.fork (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40)
at e._createInnerZone (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:4:14446)
at new e (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:4:11954)
at i (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:12294)
at t.application (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:11:14286)
at Object.n [as bootstrap] (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:19:711)
at execute (http://localhost:9000/dist/bootstrap.js:18:23)
at u (http://localhost:9000/node_modules/systemjs/dist/system.js:5:97)
at Object.execute (http://localhost:9000/node_modules/systemjs/dist/system.js:5:3188)
我犯错误的地方? Changelog对此没有任何说法。
答案 0 :(得分:7)
路由器链接已重命名为routerLink,作为删除&#39; - &#39;的一部分。基于语法。
我在这里有一个工作样本:http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0
答案 1 :(得分:3)
这个( camelCase )突破变化的链接:
Angular模板现在
case-sensitive
并使用camelCase
代替kebab-case (dash-case)
在:
<p *ng-if="cond"> <my-cmp [my-prop]="exp"> <my-cmp (my-event)="action()"> <my-cmp [(my-prop)]="prop"> <input #my-input> <template ng-for #my-item [ng-for-of]=items #my-index="index">
后:
<p *ngIf="cond"> <my-cmp [myProp]="exp"> <my-cmp (myEvent)="action()"> <my-cmp [(myProp)]="prop"> <input #myInput>`, <template ngFor="#myItem" [ngForOf]=items #myIndex="index">
和Observables问题的链接
从Observable
重新导出angular2/core
否在
import {Observable} from 'angular2/core'
在
import {Observable} from 'rxjs/Observable';