Угловая 6 маршрутизация с использованием функции машинописи

Question

Я пытаюсь программно маршрутизировать через функцию, потому что мне нужно обходить путь, когда щелчок по ссылке (тегу) внутри 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");
  }
}

App-routing.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", он все равно не работает

Я - нуби с угловой, поэтому я не уверен, правильно ли я настраиваю маршрутизацию или что-то еще не так.

Answer 1

, если ваш app-routing.module.ts представляет что-то вроде этого:

const routes: Routes = [{ path: 'blog', component: BlogComponent }];

, если вы просматриваете машинопись, попробуйте это:

this.router.navigate(['/blog']);

Вы не можете поместить routerLink внутри svg, поэтому не пытайтесь это сделать.