按表达式的角度路由

Question

我是 Angular 新手，正在学习 Angular 路由部分

这里对于第一个和第二个路由器链接，我使用了静态路径，对于第三个，我尝试了表达式，并且我有一个输入文本框，其模型是“myRoute”.. 我正在尝试输入“第三个”文本框和值绑定到模型“myRoute”中，我在路由中定义了一个组件“ThirdComponent”，但它不起作用

<input type="text" [(ngModel)]='myRoute'>
<nav>
  <ul>
     <li><a routerLink="first">First</a></li> 
     <li><a routerLink="second">Second</a></li>
     <li><a [routerLink]="['myRoute']">Third</a></li>

  </ul>
</nav>

这是我的路线

const appRoutes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'second', component: SecondComponent },
  { path: 'third', component: ThirdComponent }
];

这是我收到的错误消息

错误：无法匹配任何路由。 URL 段：'myRoute' 错误：无法匹配任何路由。 URL 段：'myRoute'

只有在文本框中输入文本“第三”后，我才会单击第三个组件链接

Answer 1

在您的原始代码中，您将routerLink 绑定到文字字符串'myRoute'，如this answer 中所述。以下语法将routerLink 绑定到组件类的属性myRoute：

<a [routerLink]="myRoute">

Answer 2

从您的错误消息看来，“myRoute”已作为字符串传递给路由器，而在您的路由器中，您为“第三”而不是“myRoute”定义了路径。检查“myRoute”上的数据绑定。

<a [routerLink]="myRoute">

应该这样做！