简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Angular CLI によるルーティングの操作方法

php中世界最好的语言
リリース： 2018-06-14 10:32:48
オリジナル
1101 人が閲覧しました

今回は、Angular CLI がルーティングを操作する方法と、Angular CLI がルーティングを操作する際の注意点について説明します。以下は実際のケースです。

アプリケーションのルーティングを生成します。

最初にプロジェクトを作成します:

ng new my-routing --routing
ログイン後にコピー

2つのモジュールが生成されていることがわかります。

ルーティングモジュールを見てください:

そしてアプリを見てください。 module:

AppRoutingModule がインポートされました。

app.component.html をもう一度見てください:

router-outlet が書かれています。以下はさらに 2 つのコンポーネントを生成します:

ng g c dashboard
ng g c order
ログイン後にコピー

次に、app-routing.module でルーティングを設定します:

HTML を再度変更します:

アプリケーションを実行します: ngserve -o

うーん、問題ありません。

アプリケーションに複数のモジュールが存在する状況の場合。

ルーティングモジュールを使用してモジュールを生成します(最初に生成されるファイルを表示するには、-dパラメータを使用できます):

ng g m admin --routing
ログイン後にコピー

管理モジュール内部で、別の管理コンポーネントを作成します:

ng g c admin
ng g c admin/email -m admin
ng g c admin/user -m admin
ログイン後にコピー

実際、パス admin/ が指定されているため、最後の 2 つのコマンドの -m パラメーターは削除できます。そのため、デフォルトでは管理モジュールで宣言されます。アプリモジュールの代わりに

次に、app.moduleを変更する必要があります:

adminモジュールを追加します。

次にadmin.component.htmlを変更し、router-outletを追加します:

次にadminを変更します-routing.module.ts:

Run: ngserve -o

アドレスを直接入力します: http://localhost:4200/admin

表示されます:

そして、URL を入力します: http://localhost:4200/admin/email

次が表示されます:

だから問題ありません。

Guradを生成します。

ng g guard xxx
ログイン後にコピー
この記事の事例を読んだ後は、この方法をマスターしたと思います。 . さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

jQuery+Cookie切り替えスタイル


Angularjsのコントローラー相互通信機能の詳細解説

以上がAngular CLI によるルーティングの操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
angular
ソース：php.cn
前の記事：Angular CLI がビルドを実装する方法 次の記事：Angular CLI がルートを生成する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Angular 7 は SCSS の重複した属性を削除します AngularSASS (.scss) はプロパティを削除します。ブラウザ間の互換性のために重複した属性を埋め込むことができるように、この問題の発生を防ぐにはどうすればよいですか?...
から 2024-04-04 23:28:54
0
1
1382
Angular アプリケーションで Javascript プロトタイプ コンストラクターをインポートするとエラーがスローされる コンストラクターを含む JS ファイルをインポートしようとしている Angular アプリケーションがあります。しかし、アプリケーションを実行すると、webpack がエラーをスロ...
から 2024-04-04 11:36:15
0
1
288
Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...
から 2024-04-04 09:29:39
0
1
397
Angular で円形の SVG 温度ドラッガーを作成しますか? これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。これは、rinkle-dashoffset="-260" 設...
から 2024-04-03 09:33:29
0
1
376
Angular: テキスト要素の色を理解するためのプロパティ バインディングに反応性がない 以下は私の .ts ファイル、 import{Component}from'@angular/core';@Component({selector:'app-event-bindi...
から 2024-04-01 17:28:52
0
1
358
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！