我正在尝试通过函数以编程方式路由,因为当单击 svg 内的链接(标签)(因为 routerLink)不起作用时,我需要一种解决方法。
到目前为止,这就是我所拥有的:
<g id="MenuStub4">
<path
id="box"
fill="#231F20"
d="M1171.088,420.473c0,4.307-4.387,7.799-9.795,7.799h-94.15c-5.408,0-9.793-3.492-9.793-7.799v-8.936
c0-4.307,4.385-7.799,9.793-7.799h94.15c5.408,0,9.795,3.492,9.795,7.799V420.473z"
/>
<text
transform="matrix(1.3982 0 0 1 1096.8799 419.4614)"
font-size="11.582"
>
<a fill="white" (click)="navigate()">
Blog
</a>
</text>
</g>
还有 ts 文件:
import { Component } from "@angular/core";
import { Router } from "@angular/router";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "BrainToBytes";
constructor(private router: Router) {}
navigate(): void {
this.router.navigateByUrl("./blog");
}
}
应用程序路由.module.ts:
import { BlogComponent } from './blog/blog.component';
import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [{
path: 'blog',
component: BlogComponent
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我检查了路径,即使我用“/blog”更改它仍然不起作用
我是 Angular 新手,所以我不确定我是否正确设置了路由或其他错误。
最佳答案
如果您的 app-routing.module.ts 表示如下内容:
常量路由:路由 = [{
路径:'博客',
组件:博客组件
}];
如果您正在通过 typescript 进行导航,请尝试以下操作:
this.router.navigate(['/blog']);
你不能将 routerLink 放入 svg 中,所以不要尝试这样做。
关于javascript - 使用 typescript 函数的 Angular 6 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55895538/