逐語https://www.dazhuanlan.com/2019/08/25/5d622ce6a5639/
1209（3-9）
二つの部分の内容は、最初のページの左側のナビゲーションにジャンプすることで、2番目が異なるボタンをクリックすることで、さまざまな形態でもあります
リアル
まず、関連ページジャンプ
- ルーティングapp.moduleに配置されました
1
2
3
4
5
6
7
8
9
10
11
|
//このルーティング構成
CONST routeConfigが：ルート= [
{パス： 'ストック'を、コンポーネント：StockManageComponent}
]
//実際に使用RouterModule.forRoot（routeConfig）が注入経路に配置
インポート：[
BrowserModule、
FormsModule、
HttpModuleを」を
RouterModule.forRoot（routeConfig）
]
|
左側のナビゲーションをクリックすると、ソケットの右側に変えることができるようにcontent.htmlソケット2.増加
1
2
3
|
<部クラス= "コンテンツ">
<ルータ出口> </ルータ出口>
</セクション>
|
3.メニューパスを変更します。
1
2
3
4
5
6
7
8
9
|
<HREF = "javascriptの:;" （クリック）= "NAVを（ '株式'）"> <Iクラス= "FA FA-リンク"> </ I>の<span>股票管理</ span>の</a>の
コンストラクタ（パブリックルータ：ルータ）{}
ngOnInit（）{
}
NAV（URL：列）{
this.router.navigateByUrl（URL）。
}
|
4. CSSのためのプロセス
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
エクスポートクラスMenuComponentははのOnInit {実装し
たメニュー：アレイ<メニュー>。
currentMenuId：数;
コンストラクタ（パブリックルータ：ルータ）{}
ngOnInit（）{
this.menus = [
新しいメニュー（1、 '首页'、 'インデックス'）、
新しいメニュー（2 '股票管理'、 '在庫'）
]
}
NAV（メニュー：メニュー）{
this.router。 navigateByUrl（menu.Link）。
this.currentMenuId = menu.id
}
}
エクスポートクラスメニュー{
コンストラクタ（
パブリックID：番号、
パブリック名：文字列、
公共リンク：文字列
）{
}
}
//循环体中menu.id == currentMenuId、那么[class.active]就被使用激活如果
<LI * ngFor = "メニューのメニューを聞かせて" [class.active] = 'currentMenuId == menu.id'>
< href = "javascriptの:;" "NAV（メニュー）"（クリック）=>
<Iクラス= "FA FAリンク"> </ I>
<スパン> {{menu.name}} </スパン>
</a>の
</ LI>
|
第二に、プロセスヘッダテキスト
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//订阅事件，进行处理
export class ContentComponent implements OnInit {
public pageTitle: string;
public pageDesc: string;
constructor(
public router: Router
) {
// 订阅路由中导航结束的事件
router.events.filter(event => event instanceof NavigationEnd)
.subscribe((event: NavigationEnd) => {
if (event.url === '/dash') {
this.pageTitle = '首页'
console.log('首页');
} else if (event.url.startsWith('/stock')) {
this.pageTitle = '股票信息';
console.log('股票信息');
}
});
}
ngOnInit() {
}
}
<H1>
{{PAGETITLE}}
<小> {{pageDesc}} </小>
</ H1>
|
第三に、フォームのジャンプ
1
2
3
4
|
1.コンポーネントstockFormを作成します。
2.従来に向けstockFormルーティング、送信パラメータを、作成
{パス： '在庫/：ID '、成分：StockFormComponent}
|
注：新しいコンポーネント（NG GC新しい成分）を生成した後、対応する構成要素を表示するように、サービスを再起動します