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

Angular CLI がルートを生成する方法

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

今回は、Angular CLI がルートを生成する方法と、Angular CLI がルートを生成する際の注意点について説明します。実際のケースを見てみましょう。

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

まずプロジェクトを作成します:

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

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

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

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

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

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

さらに 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 の代わりに module を追加します。

次に、app.module:

admin モジュールを追加する必要があります。

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

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

実行: ngserve -o

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

次が表示されます:

そしてURLを入力してください: http://localhost:4200/admin/email

次が表示されます:

だから問題ありません。

Guradを生成します。

ng g guard xxx
ログイン後にコピー

このケースを読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。 推奨読書:

Angular CLI が Build

JS を実装して、マウスがテキストの上を通過したときにフローティング レイヤー効果をポップアップさせる方法

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

関連ラベル：
angular
ソース：php.cn
前の記事：Angular CLI によるルーティングの操作方法 次の記事：webpack のより実用的な機能の詳細な紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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 学習者の迅速な成長を支援します！