<dl id="opymh"></dl>

<div id="opymh"></div>
      <div id="opymh"><tr id="opymh"></tr></div>

        <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

        <em id="opymh"></em>

        <em id="opymh"><ol id="opymh"></ol></em>

              頻道欄目
              首頁 > 網絡 > 路由器 > 正文
              前端路由的配置教程
              2018-05-11 10:41:25         來源:廊坊師范學院信息技術提高班十三期馬瑩  
              收藏   我要投稿

              首先在路由界面配置路由,children是配置子路由的

              const routes: Routes = [

              {path:'',component:HomeComponent}

              ];

              然后在引入組件

              Routes的使用

              import { HomeComponent } from './home/home.component';

              在path中不能使用"/",因為在多個視圖間導航時,自由使用相對或者絕對路徑

              RouteRoutlet的使用:

              插座,所有的界面都在本界面的下面顯示

              RouterLink的使用:

              app.component.html界面:

              <a [routerLink]="['/']">主頁</a>

              <a[routerLink]="['/product']">商品詳情</a>

              <router-outlet></router-outlet>

              解釋:routerLink后面'/'的是跳轉的跟路由,加上點是跳轉子路由的

              點擊主頁面上的按鈕跳轉到路由界面

              app-routing.module.ts路由界面

              import { HomeComponent } from './home/home.component';

              import { ProductComponent } from './product/product.component';

              const routes: Routes = [

              {path:'',component:HomeComponent},

              {path:'product',component:ProductComponent}

              ];

              例如:我點擊商品詳情,然后就找到跟路由中的product,然后根據引用找到相應的界面

              還有通過按鈕跳轉:

              <input type="button" value="商品詳情" (click)="todo()">

              然后在到app.component.ts

              constructor(private router:Router){

              }

              todo(){

              this.router.navigate(['/product']);

              }

              }

              完整界面截圖:

              ActivatedRoute的使用:

              app.component.html界面:

              <a [routerLink]="['/product']" [queryParams]="{id:1}">商品詳情</a>

              product.component.ts界面,如何獲取ActivatedRoute參數:

              export class ProductComponent implements OnInit {

              private productId:number;

              //首先在構造函數中注入(碼號后面的是類型)

              constructor(private routerInfo:ActivatedRoute) { }

              ngOnInit() {

              //獲取參數

              this.productId=this.routerInfo.snapshot.queryParams["id"];

              }

              }

              product.component.html界面,現在最后的參數:

              <p>

              商品ID:{{productId}}

              </p>

              第二種傳參方式,URL方式

              第一步:修改路由中的path屬性,改成

              path:'product/:id',component:ProductComponent},

              第二步:修改routerLink中的參數:

              <a [routerLink]="['/product',1]" >商品詳情</a>

              第三步修改取值:

              ngOnInit() {//從URL中獲取

              this.productId=this.routerInfo.snapshot.params["id"];

              }

              這種最后獲取的值是1,

              todo(){

              this.router.navigate(['/product',2]);

              }

              這方式獲取的結果是2但是來回切換的時候路徑中的值變換頁面的值不更換,解決這種問題方法叫做參數快照,使用這種方式叫做參數快照(snapshot),

              在查詢參數中傳遞數據:

              使用的方式參數快照(snapshot)  和  參數訂閱(subscribe)解決問題

              步驟:修改第三步中的獲取參數的方式

              ngOnInit() {

              //參數訂閱

              this.routerInfo.params.subscribe((params:Params)=>this.productId=params["id"]);

              //this.productId=this.routerInfo.snapshot.params["id"];

              }

              路由重定向:

              制定路由跳轉的界面:

              {path:'',redirectTo:'/home',pathMatch:'full'},

              {path:'home',component:HomeComponent},

              解釋上面的意思:

              當路由是空字符串的時候直接跳轉到home中,然后通過下面這行直接找到相應的home界面

              子路由:

              子路由創建的方法:

              {path:'product/:id',component:ProductComponent,children:[

              {path:'',component:ProductComponent},

              {path:'seller/:id',component:SellerInfoComponent}

              ]},

              注解:

              路由配置完成之后,然后在相應的界面上添加插座routeroutlet

              seller-info組件的配置:

              seller-info.component.html

              <p>

              銷售員ID:{{selledid}}

              </p>

              seller-info.component.ts

              部分代碼:

              export class SellerInfoComponent implements OnInit {

              private selledid:number;//定義一個數字型的變量

              constructor(private routeinfo:ActivatedRoute) { }//構造函數

              ngOnInit() {

              this.selledid=this.routeinfo.snapshot.params["id"];//獲取路由中的值

              }

              }

              product.component.html頁面的子組件,所以在此界面中添加

              <a[routerLink]="['./']">商品詳情</a><!--子路由的寫法-->

              <a[routerLink]="['./seller',99]">銷售員信息</a>

              <router-outlet></router-outlet>

              輔助路由(兄弟路由)

              輔助路由插座的寫法:

              <router-outlet name="aux"></router-outlet>

              路由配置寫法:

              {path:'chat',component:ChatComponent,outlet:'aux'}

              在主頁面顯示寫法:

              <a [routerLink]="[{outlets:{aux:'chat'}}]">開始聊天</a>

              <a [routerLink]="[{outlets:{aux:null}}]" >結束聊天</a>

              解釋:通過路由中的outlets找到chat的html頁面,然后顯示!

              圖解:

              <a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">開始聊天</a>

              點擊開始聊天,chat界面和home界面都會顯示

              路由守衛

              先寫一個路由守衛,新建里一個ts,然后寫進去:

              import { CanActivate } from "@angular/router";

              export class loginGuard implements CanActivate{

              canActivate(){

              let lgogenIn:boolean=Math.random()<0.5;//獲取隨機數,

              if(!lgogenIn){大于0.5顯示未登錄

              console.log("用戶未登錄");

              }

              return lgogenIn;

              }

              }

              綁定路由守衛:

              canActivate:[loginGuard],實例化是通過angular注入來實例化的

              守衛那個路由,就在那個路由的后面寫上

              providers:[loginGuard]

              詳細用法:

              離開路由守衛,就是守衛那個組件,在離開的時候就會提示:

              創建一個ts文件,然后

              import { CanDeactivate } from "@angular/router";

              import { ProductComponent } from "../product/product.component";//引用product組件

              export class UnsaveGuad implements CanDeactivate<ProductComponent> {

              canDeactivate(component: ProductComponent) {

              return window.confirm("你還沒有保存確定離開嗎?");

              }

              }

              添加在要被守衛的組件路由后面,并且添加providers

              canDeactivate:[UnsaveGuad]//添加在路由后面

              UnsaveGuad//添加在providers數組里面

              守衛可以添加多個,在數組中有多個的時候可以循環完成如有一個沒有滿足條件,那么就不會執行當前的操作!

              點擊復制鏈接 與好友分享!回本站首頁
              上一篇:靜態路由和動態路由_路由匯總和默認路由
              下一篇:在家中同時安裝兩個無線路由器的設置方法
              相關文章
              圖文推薦
              點擊排行

              關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

              版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

              极速飞艇好假
              <dl id="opymh"></dl>

              <div id="opymh"></div>
                  <div id="opymh"><tr id="opymh"></tr></div>

                    <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                    <em id="opymh"></em>

                    <em id="opymh"><ol id="opymh"></ol></em>

                          <dl id="opymh"></dl>

                          <div id="opymh"></div>
                              <div id="opymh"><tr id="opymh"></tr></div>

                                <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                                <em id="opymh"></em>

                                <em id="opymh"><ol id="opymh"></ol></em>