web-dev-qa-db-ja.com

Angular 4+：<a>要素のRouterLinkが正しく機能していません

AppRoutingModuleクラスの@NgModuleのimports内に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

問題は、routerLinkをホームページに追加しようとしているheader.component.tsにあります。私はそのような解決策を試しました：

<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は子コンポーネント<header-bar>（ロゴ）の要素に配置され、<router-outlet>その親に移動する必要があります？

しかし、routerLink s place 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>
angularrouterlink
5
Michał Ziobro

ルーティングを機能させるには、さらに多くのことが必要です。 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 {}
2
Teedeez

わかりました、私は実際にエラーを見つけました、そしてそれは私が今までに想像したことのない場所にありました。イベントバインディングが機能しない（クリックする）など、他のさまざまな動作もありました。したがって、このサンプルに基づくWebプロジェクトの構成を確認しますangular githubの4ユニバーサルスパ： https://github.com/MarkPieszak/aspnetcore-angular2-universal

  1. Yeomanツールで生成されたASP NET CoreSPAからアップグレードしました。

npm install -g yo generator-aspnetcore-spa

次に、プロジェクトを移動する空のディレクトリにcdして、次のようにYeomanを実行します。

yo aspnetcore-spa

  1. 次に、サーバー側の事前レンダリングを使用している間は、Leaflet Open StreetMapsを簡単に使用できないことに気付きました。

  2. したがって、このアップグレードをAngular 2 +-> Angular 4+から、各ファイル構成、モジュール、ブート、webpack、tsconfigなどのファイルを変更して購入します。私は本当にgithubの下でこのスタータープロジェクトの大きな印象を受けました：
    https://github.com/MarkPieszak/aspnetcore-angular2-universal

  3. 一日の終わりに、私は正しく実行されると思われる古いコードが残っていることに気づきました。

// boot.client.ts 
platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

そして、angularユニバーサルプロジェクトの新しいバージョンで似ているように見える正しいものは次のようになります：

 modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = 
 platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS。以前はplatformUniversalDynamic => platformBrowserDynamic.も置き換えました

0
Michał Ziobro