typescript - angular 2 rc1 - ルーターを適切に使用する方法

Question

typescript を使用して angular2-meteor アプリケーションを作成しています。

angular2-meteor 0.5.5 が angular 2.0.0-rc1 をサポートするようになりました

これは私の更新された app.ts です

import 'reflect-metadata';
import 'zone.js/dist/zone';
import {Component,provide} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, Routes} from '@angular/router';

import {MdToolbar} from '@angular2-material/toolbar';
import {MdButton} from '@angular2-material/button';
import {Welcome} from './imports/pages/welcome/welcome';
import {AddDrink} from './imports/pages/add-drink/add-drink';

@Component({
 selector: 'app',
 templateUrl: 'client/app.html',
 directives: [MdToolbar,MdButton,ROUTER_DIRECTIVES],
 providers: [ROUTER_PROVIDERS,provide(APP_BASE_HREF, { useValue: '/' })]
})
@Routes([
 { path: '/', component: Welcome },
 {path: '/add-drink',component:AddDrink}  
])
class MyAlcoholist { }

bootstrap(MyAlcoholist);

これは私のメインの index.html ファイルです:

<body>
 <app></app>
</body>

これはメインコンポーネントの html ファイルです。

<md-toolbar [color]="primary">
 <span>MyAlcoholist</span>&nbsp;
 <button md-raised-button color="primary">Home</button>&nbsp;
 <button md-raised-button color="primary">Add Drink</button>&nbsp;
 <span class="span-fill-remaining-space"></span>
 <login-buttons></login-buttons>
</md-toolbar>
<router-outlet></router-outlet>

アプリケーションを参照しようとすると、多くのエラーが発生します。

EXCEPTION: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4
VM1477:27 EXCEPTION: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:296(anonymous function) @ dynamics_browser.js:51ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ ng_zone_impl.js:45ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.js:36ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:86 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4
VM1477:27 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 STACKTRACE:window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4
at resolvePromise (zone.js:538)
at zone.js:574
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at XMLHttpRequest.ZoneTask.invoke (zone.js:426)window.console.error @ VM1477:27BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:60(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Unhandled Promise rejection: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4 ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'href' since …d Drink</button>&nbsp;↵    <s"): MyAlcoholist@3:4", stack: "Error: Template parse errors:↵Can't bind to 'href'…234901849e8c5cb714d4f3d3e1d96da396c529c:45368:38)"}window.console.error @ VM1477:27consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Error: Uncaught (in promise): Template parse errors:(…)window.console.error @ VM1477:27consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Unhandled Promise rejection: Template parse errors:
Can't bind to 'href' since it isn't a known native property ("<md-toolbar [color]="primary">
<span>MyAlcoholist</span>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
<button "): MyAlcoholist@2:4
Can't bind to 'href' since it isn't a known native property ("p;
<button md-raised-button color="primary" [routerLink]="['/Welcome']">Home</button>&nbsp;
[ERROR ->]<button md-raised-button color="primary" [routerLink]="['/AddDrink']">Add Drink</button>&nbsp;
<s"): MyAlcoholist@3:4 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'href' since …d Drink</button>&nbsp;↵    <s"): MyAlcoholist@3:4", stack: "Error: Template parse errors:↵Can't bind to 'href'…234901849e8c5cb714d4f3d3e1d96da396c529c:45368:38)"}window.console.error @ VM1477:27consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM1477:27 Error: Uncaught (in promise): Template parse errors:(…)window.console.error @ VM1477:27consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

私のpackage.jsonには以下が含まれています：

{
  "name": "myalcoholist-meteor",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular2-material/button": "^2.0.0-alpha.4",
    "@angular2-material/core": "^2.0.0-alpha.4",
    "@angular2-material/toolbar": "^2.0.0-alpha.4",
    "angular2-meteor": "^0.5.5",
    "angular2-meteor-auto-bootstrap": "^0.5.5",
    "es6-shim": "^0.35.0",
    "meteor-node-stubs": "^0.2.3",
    "reflect-metadata": "=0.1.2",
    "rxjs": "=5.0.0-beta.6",
    "zone.js": "^0.6.12"
  }
}

今.. [routerLink]htmlからプロパティを削除すると、エラーはなくなります。私はそれを正しく使用していませんか？

score 3 · Accepted Answer

アップデート

これは (現在) 新しいルーターでは有効ではありません:

<button md-raised-button color="primary" [routerLink]="['/Welcome']">

代わりに使用

<a md-raised-button color="primary" [routerLink]="['/Welcome']">

/Welcomeまた、ルートが登録されているパスも確認してください。新しいルーターはパスのみを使用してナビゲートし、ルート名はもうありません（大文字であるため、私の疑いがありますW）

オリジナル

インポートが変更されました。

代わりに使用

import {APP_BASE_HREF } from '@angular/common';

Location と HashLocationStrategyも参照してください beta.16 で機能しなくなりました

typescript - angular 2 rc1 - ルーターを適切に使用する方法

2 に答える 2

Related

Reference