Angular 5 routerLink(Angular 5 routerLink)

Angular 5 routerLink(Angular 5 routerLink)

我在product.component.html下的按钮中添加了routerLink，它将重定向到/ update-product。 以下是代码：

<button routerLink="./update-product" routerLinkActive="active">Edit</button>

当我提交按钮时，它不重定向，但在控制台中没有错误。

我的product.component.ts如下所示：

import { Component, OnInit } from '@angular/core'; import {Title} from "@angular/platform-browser"; import { ProductService } from './product.service'; import { Product } from './product'; import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'], providers: [] }) export class ProductComponent implements OnInit { products: Product[] = []; dataInvalid = false; formErrors = []; formSubmitting = false; //title = 'Products'; countries = []; states = []; constructor(private productService: ProductService, private title: Title) { }

I have added the routerLink in the button under product.component.html which will redirect to /update-product. Below is the code:

<button routerLink="./update-product" routerLinkActive="active">Edit</button>

When I submit the button, its not redirecting however, no error in the console.

My product.component.ts is as below:

import { Component, OnInit } from '@angular/core'; import {Title} from "@angular/platform-browser"; import { ProductService } from './product.service'; import { Product } from './product'; import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'], providers: [] }) export class ProductComponent implements OnInit { products: Product[] = []; dataInvalid = false; formErrors = []; formSubmitting = false; //title = 'Products'; countries = []; states = []; constructor(private productService: ProductService, private title: Title) { }

最满意答案

您将不得不按照以下方式进行。

<button routerLink="/update-product" routerLinkActive="active">Edit</button>

You will have to do it in following way.

<button routerLink="/update-product" routerLinkActive="active">Edit</button>