Angular 4のナビゲーションバーでルーターリンクを変更するにはどうすればよいですか?

スティーバン・チャールズ

間違った routelink にルーティングするという問題があります。これを回避するには?ノブでごめんなさい。

Chrome コンソールから取得しているエラーは

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'oadmin/add-new-student/add-new-teacher'
Error: Cannot match any routes. URL Segment: 
'oadmin/add-new-student/add-new-teacher'

ナビゲーション ボタンの HTML コード

<md-toolbar color="primary" class="toolbar-student">  
<span >
    <button md-button [mdMenuTriggerFor]="menu1">Student</button>
    <md-menu #menu1="mdMenu">
      <button md-menu-item [routerLink]="['add-new-student']" >Add New Student</button>
      <button md-menu-item>Item 2</button>
    </md-menu>
  </span>
  <span >
    <button md-button [mdMenuTriggerFor]="menu2">Teacher</button>
    <md-menu #menu2="mdMenu">
      <button md-menu-item [routerLink]="['add-new-teacher']" >Add New Teacher</button>
      <button md-menu-item>Item 2</button>
    </md-menu>
  </span>
</md-toolbar>

私のルート

var routes = [
  {path: '',
  component: StudentComponent},
  {path: 'oadmin',
  component: OAdminComponent},
  {path: 'oadmin/add-new-student',
  component: NewStudentComponent},
  {path: 'oadmin/add-new-teacher',
  component: NewTeacherComponent},
];

ナビゲーションバーは両ルート共通。「Add New Student」ルート内で「Add New Teacher」ルートをクリックすると、このエラーが発生します。およびその逆。これを回避するには?

ディエイ

oadmin/add-new-studentパスadd-new-teacherにいてリダイレクトするとoadmin/add-new-student/add-new-teacher、書き込みは現在の URL に[routerLink]="['add-new-teacher']"追加さ/add-new-teacherれるだけであるため、実際にリダイレクトされます代わりに、次の代わりにリダイレクトする必要がありますoadmin/add-new-teacher

[routerLink]="['add-new-teacher']"

これを使用する必要があります:

routerLink="/oadmin/add-new-teacher"

また、add-new-teacher にアクセスして add-new-student リンクをクリックすると、同じエラーが発生するため、add-new-student にも変更する必要があります。

<button md-menu-item routerLink="/oadmin/add-new-student" >Add New Student</button>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular 7のルーターナビゲーションでスクロールするにはどうすればよいですか?

分類Dev

Angular 9では、ナビゲーションリンクが指しているURLを使用している場合、ナビゲーションリンクのHTM1をどのように変更しますか?

分類Dev

Angular 4角度のあるマテリアルタブグループでタブナビゲーションを無効にするにはどうすればよいですか?

分類Dev

AngularとBootstrapの「すべて」タブでタブナビゲーションを作成するにはどうすればよいですか?

分類Dev

Angularを使用してロゴとナビゲーションバーを1行で表示するにはどうすればよいですか?

分類Dev

キーナビゲーション(タブ)でAngular / material mat-menuが閉じないようにするにはどうすればよいですか?

分類Dev

Angular JS:ページ内のすべてのナビゲーションに同じURLを設定するにはどうすればよいですか?

分類Dev

Angularでのスクロールのヘッダーセクションを変更するにはどうすればよいですか?

分類Dev

遅延読み込みを使用する場合、Angularでナビゲーションを動的に構築するにはどうすればよいですか?

分類Dev

前のページをナビゲートするためにAngularに戻るボタンを実装するにはどうすればよいですか?

分類Dev

ページアンカーナビゲーションを使用しているときに、Angular 2でnavbarをブートストラップするように「activate」クラスを設定するにはどうすればよいですか?

分類Dev

Angular 8アプリケーションにモバイルアクセストークンを追加するにはどうすればよいですか?

分類Dev

ネイティブスクリプトAngularアプリでナビゲーションラグとメモリ不足の問題をプロファイリングするにはどうすればよいですか?

分類Dev

Angularアプリケーションのルーティングでページタイトルを変更するにはどうすればよいですか?

分類Dev

Angular UI-ルーターの縮小エラー-解決構文を文字列インジェクションベースに変更するにはどうすればよいですか?

分類Dev

データマップAngular8のバブルにアニメーション効果を追加するにはどうすればよいですか?

分類Dev

Ionic3、Cordova、Angular4アプリケーションでAndroidデバイスの言語を取得するにはどうすればよいですか?

分類Dev

Angular Material MatDialogのデフォルトアニメーションを変更するにはどうすればよいですか?

分類Dev

Angular4アプリケーションのRESTAPIを介してクライアントブラウザコンソールログをバックエンドに転送するにはどうすればよいですか?

分類Dev

Angular 4でグローバルイベントリスナーを作成するにはどうすればよいですか?

分類Dev

Angularのビューからモデルを変更するにはどうすればよいですか?

分類Dev

Angular 4+でリップルのアニメーションが終了したことを検出するにはどうすればよいですか?

分類Dev

Angular 2でルート変更をキャンセルするにはどうすればよいですか?

分類Dev

Angular 1.5コンポーネントルーターでルート変更を検出するにはどうすればよいですか?

分類Dev

Angular 4ルーターは、コンポーネントを破棄するのではなく、routerLinkナビゲーションに追加しています

分類Dev

Angular2-HighChartsでタイムゾーンを変更するにはどうすればよいですか?

分類Dev

Angularでサーバー側のセッション変数を生成するにはどうすればよいですか?

分類Dev

(Angular 4、AOT、キャッシュの更新)サーバーでコードの変更が発生したときにエンドユーザーのブラウザーにハード更新を強制するにはどうすればよいですか?

分類Dev

Angular:サブスクライブ内のリターンを変更するにはどうすればよいですか?

Related 関連記事

  1. 1

    Angular 7のルーターナビゲーションでスクロールするにはどうすればよいですか?

  2. 2

    Angular 9では、ナビゲーションリンクが指しているURLを使用している場合、ナビゲーションリンクのHTM1をどのように変更しますか?

  3. 3

    Angular 4角度のあるマテリアルタブグループでタブナビゲーションを無効にするにはどうすればよいですか?

  4. 4

    AngularとBootstrapの「すべて」タブでタブナビゲーションを作成するにはどうすればよいですか?

  5. 5

    Angularを使用してロゴとナビゲーションバーを1行で表示するにはどうすればよいですか?

  6. 6

    キーナビゲーション(タブ)でAngular / material mat-menuが閉じないようにするにはどうすればよいですか?

  7. 7

    Angular JS:ページ内のすべてのナビゲーションに同じURLを設定するにはどうすればよいですか?

  8. 8

    Angularでのスクロールのヘッダーセクションを変更するにはどうすればよいですか?

  9. 9

    遅延読み込みを使用する場合、Angularでナビゲーションを動的に構築するにはどうすればよいですか?

  10. 10

    前のページをナビゲートするためにAngularに戻るボタンを実装するにはどうすればよいですか?

  11. 11

    ページアンカーナビゲーションを使用しているときに、Angular 2でnavbarをブートストラップするように「activate」クラスを設定するにはどうすればよいですか?

  12. 12

    Angular 8アプリケーションにモバイルアクセストークンを追加するにはどうすればよいですか?

  13. 13

    ネイティブスクリプトAngularアプリでナビゲーションラグとメモリ不足の問題をプロファイリングするにはどうすればよいですか?

  14. 14

    Angularアプリケーションのルーティングでページタイトルを変更するにはどうすればよいですか?

  15. 15

    Angular UI-ルーターの縮小エラー-解決構文を文字列インジェクションベースに変更するにはどうすればよいですか?

  16. 16

    データマップAngular8のバブルにアニメーション効果を追加するにはどうすればよいですか?

  17. 17

    Ionic3、Cordova、Angular4アプリケーションでAndroidデバイスの言語を取得するにはどうすればよいですか?

  18. 18

    Angular Material MatDialogのデフォルトアニメーションを変更するにはどうすればよいですか?

  19. 19

    Angular4アプリケーションのRESTAPIを介してクライアントブラウザコンソールログをバックエンドに転送するにはどうすればよいですか?

  20. 20

    Angular 4でグローバルイベントリスナーを作成するにはどうすればよいですか?

  21. 21

    Angularのビューからモデルを変更するにはどうすればよいですか?

  22. 22

    Angular 4+でリップルのアニメーションが終了したことを検出するにはどうすればよいですか?

  23. 23

    Angular 2でルート変更をキャンセルするにはどうすればよいですか?

  24. 24

    Angular 1.5コンポーネントルーターでルート変更を検出するにはどうすればよいですか?

  25. 25

    Angular 4ルーターは、コンポーネントを破棄するのではなく、routerLinkナビゲーションに追加しています

  26. 26

    Angular2-HighChartsでタイムゾーンを変更するにはどうすればよいですか?

  27. 27

    Angularでサーバー側のセッション変数を生成するにはどうすればよいですか?

  28. 28

    (Angular 4、AOT、キャッシュの更新)サーバーでコードの変更が発生したときにエンドユーザーのブラウザーにハード更新を強制するにはどうすればよいですか?

  29. 29

    Angular:サブスクライブ内のリターンを変更するにはどうすればよいですか?

ホットタグ

アーカイブ