Question

有一个简单的演示网站，其中包含2页（主页和项目）。当我通过菜单栏从首页单击到项目页面时，一切正常。但是，当我单击主页上指向项目页面的链接时，第二个项目页面就会显示出来，然后重新加载了主页。有人知道可能有什么问题吗？如果我用按钮替换锚，它也可以正常工作！所以我想 href =“”

出了点问题

路线：

<Application x:Class="WPFSolution.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         StartupUri="ProductsMenu.xaml" ShutdownMode="OnMainWindowClose">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
            <!-- Accent and AppTheme setting -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Red.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            <!-- BaseDark.xaml | BaseLight.xaml -->
            <!-- Icons -->
            <ResourceDictionary Source="pack://application:,,,/WPFSolution;component/Resources/Icons.xaml"></ResourceDictionary>

            <!-- Languages -->
            <!--<ResourceDictionary Source="Resources/StringResources.en.xaml"></ResourceDictionary>-->
            <ResourceDictionary Source="Resources/StringResources.it.xaml"></ResourceDictionary>

        </ResourceDictionary.MergedDictionaries>

        <Style TargetType="{x:Type ToolTip}">
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Padding" Value="7,4,7,4"/>
        </Style>


        <!--IMMAGINI -->
        <!--nodi-->
        <!--<BitmapImage x:Key="Nodo1" UriSource="Resources/img/TileImages/nodi/nodo1.jpg"></BitmapImage>
        <BitmapImage x:Key="Nodo2" UriSource="Resources/img/TileImages/nodi/nodo2.jpg"></BitmapImage>
        <BitmapImage x:Key="Nodo3" UriSource="Resources/img/TileImages/nodi/nodo3.jpg"></BitmapImage>
        <BitmapImage x:Key="Nodo4" UriSource="Resources/img/TileImages/nodi/nodo4.jpg"></BitmapImage>-->


    </ResourceDictionary>
</Application.Resources>

}）

导航栏（正常工作）：

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({
  imports: [
  ...,
  RouterModule.forRoot(routes, { useHash: true })
],
exports: [
],

html（主页-恰好是一个组件）：

<a [routerLink]="['/project']" class="nav-link">Project</a>

（组件的打字稿）：

<a href="" (click)="showProject()">project</a>

Answer 1

最重要的是，您需要删除html页面上的href属性：

HTML锚点：

<a href="" (click)="showProject()">project</a>

必须在没有href属性的情况下使用。

<a (click)="showProject()">project</a>

否则，页面将被完全重新加载。然后，对路由配置提出一些建议。使用以下方法更改路线constant：

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', redirectTo: '' }
];

在组件中，只需使用以下命令修改showProject方法：

public showProject() {
  this.router.navigate(['project']);
}

Answer 2

尝试一个空的[routerLink]

  <a [routerLink]="" (click)="showProject()">project</a>

Answer 3

似乎有效的方法正在替换锚点的href：

<a href="javascript:void(0)" (click)="showProject()">

Angular2路由错误地重新加载了主页

3 个答案: