Question

在我的问题中没有添加太多代码或文档的情况下，我对Angular 2演示的[routerLink]代码有一个解决问题：

版本

Node.js - v4.4.7
@angular - 2.0.0-rc.1

应用/ app.component.ts

<ion-slides *ngIf="loaded&&slides.length>0" pager>
  <ion-slide *ngFor="let slide of slides">
    <ion-toolbar>
      <ion-buttons end>
        <button block (click)="goToCategoryPage()">
          Skip
        </button>
      </ion-buttons>
    </ion-toolbar>
    <img [src]="slide.image" class="slide-image" />
    <h2 class="slide-title" [innerHTML]="slide.title"></h2>
    <p [innerHTML]="slide.description"></p>
  </ion-slide>
  <ion-slide>
    <ion-toolbar>
    </ion-toolbar>
    <img src="img/ica-slidebox-img-4.png" class="slide-image" />
    <h2 class="slide-title">More Products?</h2>
    <button large clear (click)="goToCategoryPage()">
      Continue
      <ion-icon name="arrow-forward"></ion-icon>
    </button>
  </ion-slide>
</ion-slides>

应用/ app.component.html

@RouteConfig([
    {
        path: '',
        name: 'TasksComponent',
        component: TasksComponent
    },
    {
        path: 'tasks/editor',
        name: 'TaskEditorComponent',
        component: TaskEditorComponent
    },
    {
        path: 'timer',
        name: 'TimerComponent',
        component: TimerComponent
    }
])

呈现HTML（在浏览器中）

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <strong class="navbar-brand">My Pomodoro App</strong>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a [routerLink]="['TasksComponent']">Tasks</a></li>
            <li><a [routerLink]="['TimerComponent']">Timer</a></li>
            <li><a [routerLink]="['TaskEditorComponent']">Publish Task</a></li>
        </ul>
    </div>
</nav>

<router-outlet></router-outlet>

如果我从锚标记中删除 [routerLink] =＆＃34; [＆＃39; TasksComponent＆＃39;] ，则锚标记会显示没有问题。不知何故，[routerLink]的渲染引起了问题。似乎问题的范围不在我的 import 命令或任何其他Angular 2相关信息中，所以我将代码的范围缩小到版本，typescript文件和html文件中问题

我正在使用Lite Server运行它。任何帮助将不胜感激。

Angular 2 [routerLink]无法在浏览器中解析

0 个答案: