Question

我知道我可以使用[routerLinkActive]="['active']"，事实上我使用它并且当我点击导航栏上的按钮并将其重定向到example.com/home时工作正常，但如果我使用只有example.com，没有活动类，/home且只有网址是相同的组件，我该如何解决？

Answer 1

您可以在路由模块中使用重定向

import matplotlib.pyplot as plt
import numpy as np
from scipy.optimize import curve_fit
#function declaration with additional offset parameter
def Gauss(x, a, x0, sigma, offset):
    return a * np.exp(-(x - x0)**2 / (2 * sigma**2)) + offset
#loading x, y dataset
x, y = np.loadtxt('test.txt', unpack = True, delimiter=' ')
#calculate parameter of fit function with scipy's curve fitting algorithm
popt, pcov = curve_fit(Gauss, x, y, p0=[np.max(y), np.median(x), np.std(x), np.min(y)])
#plot original data
plt.plot(x, y, 'b+:', label='data')
#create different x value array for smooth fit function curve
x_fit = np.linspace(np.min(x), np.max(x), 1000)
#plot fit function
plt.plot(x_fit, Gauss(x_fit, *popt), 'r-', label='fit')
#beautify graph
plt.legend()
plt.title('Fig. 1 - Fit for Frequency')
plt.xlabel('Frequecy (GHz)')
plt.ylabel('Flux Density (mJy)')
plt.show()

说明：

它会从const routes: Routes = [ { path: "", redirectTo: "home", pathMatch: "full" }, { path: "**", component: PageNotFoundComponent, pathMatch: "full" } ];重定向到example.com。这样example.com/home将正确突出显示所选路线。

看看Angular Scaffolding。它以同样的方式完成。尝试删除路径，你会看到。

甚至更好，听听路线事件：

Demo
Source Code

有些事情：

routerLinkActive

然后这样做

constructor(
  private router: Router
) {
  router.events.subscribe((event: RouterEvent) => {
    this.navigationInterceptor(event);
  });
}

然后在模板中使用路径网址，类似这样

navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.currentUrl = event.url;

      const route: Route = this.currentUrl;

      this.loading = true;
    } else if (
      event instanceof NavigationEnd ||
      event instanceof NavigationCancel ||
      event instanceof NavigationError
    ) {
      this.loading = false;
    }
  }

查看源代码以便更好地理解

Angular show类在Navbar上处于活动状态

1 个答案: