Angular7.2.7路由使用初體驗(yàn)

更新時(shí)間：2019年03月01日 11:12:24 作者：默默無(wú)聞

這篇文章主要介紹了Angular7.2.7路由使用初體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文記錄自己在學(xué)習(xí)angular中對(duì)路由的理解

angular路由不在angular的包中, 如果要使用angular的路由, 需要從@angular/router中引入

路由的使用:

子路由使用:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Routes = [
{path: 'browse-product', component: BrowseProductComponent},
{path: 'buy-product', component: BuyProductComponent}
]

@NgModule({
imports: [RouterModule.ferChild(route)], // 子路由使用ferChild方法
exports: [RouterModule]
})

export class ChildRoutingModule {}

父組件中:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Route = [
{
  path: '',
  children: [
   {path: '', redirectTo: '/user/browse-product', pathMatch: 'full'},
   {path: 'user', loadChildren: './user/user.module#UserModule'},
   {path: 'admin', loadChildren: './admin/admin.module#AdminModule'},
  ]
 }
]

@NgModule({
imports: [RouterModule.forRoot(root, {useHash: false})],
exports: [RouterModule]
})

export class ParentRoutingModule {}

在app.module.ts中導(dǎo)入模塊

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentRoutingModule } from 'parentRoutingModule';
@NgModule({
declarations: [
  AppComponent,
 ],
 imports: [
  BrowserModule,
  RouterModule,
  ParentRoutingModule
 ]
})

然后在app.component.html中加入router-outlet即可, router-outlet就是路由的出口, 表示路由對(duì)應(yīng)的組件應(yīng)該在這里顯示.

<h1>Angular Router</h1>
<nav>
 <a routerLink="/user/browse-product">browse-product</a> &nbsp;
 <a routerLink="/user/buy-product">buy-product</a>&nbsp;
 <a routerLink="/admin/manage-product">manage-product</a>&nbsp;
 <a routerLink="/admin/operator-record">operator-record</a>&nbsp;
</nav>
<router-outlet></router-outlet>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJS 過(guò)濾器的使用
AngularJS 過(guò)濾器可用于轉(zhuǎn)換數(shù)據(jù)，這篇文章主要介紹了詳解AngularJS 過(guò)濾器的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
Angularjs編寫(xiě)KindEditor,UEidtor,jQuery指令
使用過(guò) AngularJS 的朋友應(yīng)該最感興趣的是它的指令?，F(xiàn)今市場(chǎng)上的前端框架也只有AngularJS 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。
2015-01-01
angularjs select 賦值 ng-options配置方法
下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
angularjs 源碼解析之scope
$scope 的使用貫穿整個(gè) Angular App 應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時(shí)也是表達(dá)式執(zhí)行的上下文.有了 $scope 就在視圖和控制器之間建立了一個(gè)通道,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope,同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖.
2016-08-08
解決angularjs中同步執(zhí)行http請(qǐng)求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請(qǐng)求的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Angular中實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)視圖實(shí)例代碼
近兩年當(dāng)中使用Angular開(kāi)發(fā)過(guò)很多項(xiàng)目，其中也涉及到一些樹(shù)形結(jié)構(gòu)視圖的顯示，最近的在項(xiàng)目中封裝了大量的組件，一些組件也有樹(shù)形結(jié)構(gòu)的展示，所以寫(xiě)出來(lái)總結(jié)一下。
2017-05-05
詳解Angular的8個(gè)主要構(gòu)造塊
Angular 主要分為八大構(gòu)造塊（也就是八個(gè)核心概念）：模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入。有興趣的可以了解一下
2017-06-06
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-06-06
angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例
本篇文章主要介紹了angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-02-02
angular4中*ngFor不能對(duì)返回來(lái)的對(duì)象進(jìn)行循環(huán)的解決方法
今天小編就為大家分享一篇angular4中*ngFor不能對(duì)返回來(lái)的對(duì)象進(jìn)行循環(huán)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09