首页 文章

Angular 4：<a>元素中的RouterLink无法正常工作

提问于
浏览 次
4

我已将 AppRoutingModule 放在 imports 的 @NgModule AppModule 类中 .

AppRoutingModule以这样的方式定义：

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

我在app.component.html中放置了 <router-outlet></router-outlet> .

页面根据URL正确显示：

localhost:5000/  
localhost:5000/home  
localhost:5000/lesson-offers

问题出在我的header.component.ts中，我试图将routerLink添加到主页 . 我尝试过这样的解决方案：

<img routerLink="home" ... />
<img [routerLink]="/home" ... />
<a routerLink="home"> <img ... /></a>
<a [routerLink]="home" ... ><img ... /></a>

首先，当我将routerLink放在 <img> 元素中时，尚未找到此类指令 . 然后在 <a> 元素中，它会从routerLink中随意 <a href="/home"> 并进行整页重新加载！它不应该只重新载入 <router-outlet> 的内容吗？

也许它有一些含义，我的布局看起来像这样：

// AppComponent HTML
<header-bar></header-bar>
<router-outlet></router-outlet>

和 routerLink 被放置在 children component <header-bar> （徽标）中的元素上，应该在 <router-outlet> in its parent 上导航？

但我也使用 routerLink s测试了这种行为 directly inside AppComonent 并且没有任何改变！ RouterLink 仍在重新加载网页！：

<header-bar></header-bar>
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a>
<a routerLink="page-not-found">Not Exsists</a>
<router-outlet></router-outlet>
angular routerlink

2 回答

  • 2

    您需要更多工作才能使路由工作 . 以下是 AppRoutingModule 文件的外观

    import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent, LessonOffersComponent } from somewhere;

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

@NgModule({
  imports: [ RouterModule.forRoot(APP_ROUTES) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}
    回复于
  • 0

    好吧，我实际上发现了错误，它就在我从未想过的地方 . 还有其他不同的行为，如不工作（单击）事件绑定 . 所以我查看了我的web项目的配置，这是基于github的这个示例angular 4 universal spa：https://github.com/MarkPieszak/aspnetcore-angular2-universal

    • 我已经使用yeoman工具生成的ASP NET Core SPA进行了升级 .

    npm install -g yo generator-aspnetcore-spa然后，cd到你希望你的项目去的空目录，然后按如下方式运行Yeoman：yo aspnetcore-spa

    • 然后我注意到在使用服务器端预渲染时无法轻松使用Leaflet Open Street Maps .

    • 因此从Angular 2 - > Angular 4升级，购买修改每个文件配置，模块，启动，webpack，tsconfig等文件 . 我真的对github下的这个初学者项目留下了深刻的印象：
      https://github.com/MarkPieszak/aspnetcore-angular2-universal

    • 在一天结束时，我注意到我保留了一些旧代码，我认为它将正常运行：

    // boot.client.ts
    platform.destroy（）;
    }）;
    } else {
    enableProdMode（）;
    }

    //现在或在加载DOM内容时引导应用程序
    const platform = platformUniversalDynamic（）;
    const bootApplication =（）=> {platform.bootstrapModule（AppModule）; };
    if（document.readyState ==='complete'）{
    bootApplication（）;
    } else {
    document.addEventListener（'DOMContentLoaded'，bootApplication）;
    }

    新版角度通用项目中看起来相似的正确应该是：

    modulePromise.then（appModule => appModule.destroy（））;
    }）;
    } else {
    enableProdMode（）;
    }

    const modulePromise =
    . platformBrowserDynamic（）bootstrapModule（BrowserAppModule）;

    PS . 以前我也更换了 platformUniversalDynamic => platformBrowserDynamic.

    回复于

相关问题