成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

angular 路由

LeexMuller / 2021人閱讀

摘要：從新建項(xiàng)目開始打開找到參數(shù)地址組件新建倆個(gè)頁面試試引入模塊配置寫在文件里的路由使用方法和類似，只是寫法不同。

從新建項(xiàng)目開始 ng new projectName --routing
打開 ../app/app-routing.module.ts
找到 const routes:Routes = [];
routes參數(shù): path:url地址 ,component：組件

新建倆個(gè)頁面試試

ng generate component page1
ng generate component page2

引入模塊：

import { page1Component } from ...;
import { page2Component } from ...;

routes配置: //寫在 app-route文件里

[   
{path:"page1",component:Page1Component},
{path:"page2",component:Page2Component}
]

angular的路由使用方法和ui-router類似，只是寫法不同。

1.ui-route之ui-sref ：routerLink//鏈接
用法 ：page1：

2.ui-route之ui-view : router-outlet//展示div
用法：

3.ui-route之state: Router.navigate()//路由跳轉(zhuǎn)
用法：

constructor(private router: Router)
 this.router.navigate(["/page2"])

4.ui-route之otherwise: path:"**"http://路由跳轉(zhuǎn)
用法 ：{path:"**",component:errorComponent}

angular路由傳遞參數(shù)

1.queryParams

使用方法 ：傳入 page1;
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.queryParams["id"])

2.鏈接

使用方法 ：
routes預(yù)先設(shè)置需要傳入的參數(shù):path:"/page1/:id/:age"
傳入 page1;
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.params["age"]);

3.配置

使用方法 ：
routes預(yù)先設(shè)置需要傳入的參數(shù):{path:"page1",data:[{age:5}]}
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.data[0]["age"]);

參數(shù)快照snapshot與參數(shù)訂閱subscribe區(qū)別與使用：

如果只是使用一次的話，其實(shí)使用snapshot就可以。
subscribe有一點(diǎn)類似于監(jiān)聽$watch。
用法    constructor(private routeInfo:ActivatedRoute);
      this.routeInfo.params.subscribe((data)=>{console.log(data["age"])});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92516.html

相關(guān)文章

  • Angular路由導(dǎo)航的7個(gè)步驟

    摘要：路由過程的個(gè)步驟每次點(diǎn)擊鏈接或?yàn)g覽器改變時(shí)，路由器都會(huì)確保應(yīng)用程序做出相應(yīng)的反應(yīng)。一旦所有的都已完成，其返回值是合并的路徑的然后路由器繼續(xù)步驟。你可以使用助記記住路由器經(jīng)過的步驟的順序。 路由過程的7個(gè)步驟 每次點(diǎn)擊鏈接或?yàn)g覽器URL改變時(shí)，Angular路由器都會(huì)確保應(yīng)用程序做出相應(yīng)的反應(yīng)。 為了做到這一點(diǎn)，Angular路由器執(zhí)行以下7個(gè)步驟的順序： 解析(Parse)：它解析...

    BLUE 評(píng)論0 收藏0

  • 【CuteJavaScript】Angular6入門項(xiàng)目（1.構(gòu)建項(xiàng)目和創(chuàng)建路由）

    摘要：?jiǎn)?dòng)服務(wù)，并打開新窗口可簡(jiǎn)寫創(chuàng)建新組件可簡(jiǎn)寫創(chuàng)建新服務(wù)創(chuàng)建路由模塊其他另外還有很多的命令提供，詳細(xì)可以查閱官方文檔命令。引入路由模塊導(dǎo)出路由模塊的指令這里需要添加一個(gè)數(shù)組，并傳入，導(dǎo)出讓路由器的相關(guān)指令可以在中的組件中使用。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2....

    bergwhite 評(píng)論0 收藏0

  • 利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站（四）—angular路由初步

    摘要：為了做到這一點(diǎn)，我創(chuàng)建了一個(gè)服務(wù)提供商，通過的消息推送來實(shí)現(xiàn)。最后聲明一個(gè)來發(fā)送修改過的對(duì)象。根組件，創(chuàng)建它并插入宿主頁面。路由的作用是在找不到任何路由時(shí)，訪問組件。定義路由數(shù)組后，用裝飾器導(dǎo)入，并將路由數(shù)組傳遞給的數(shù)組。 上一篇文章對(duì)用戶發(fā)來的注冊(cè)和登錄信息進(jìn)行了處理，并實(shí)現(xiàn)了將注冊(cè)用戶信息插入到mysql數(shù)據(jù)庫的數(shù)據(jù)表和從mysql數(shù)據(jù)庫的數(shù)據(jù)表中查詢到用戶的登錄信息并返回用戶認(rèn)證...

    Zhuxy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LeexMuller

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<