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

KevinYan 發(fā)布于2019-08-23 15:33 / 785人閱讀

摘要：記錄自己在學(xué)習(xí)中對路由的理解路由不在的包中如果要使用的路由需要從中引入路由的使用子路由使用子路由使用方法父組件中在中導(dǎo)入模塊然后在中加入即可就是路由的出口表示路由對應(yīng)的組件應(yīng)該在這里顯示

記錄自己在學(xué)習(xí)angular中對路由的理解 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就是路由的出口, 表示路由對應(yīng)的組件應(yīng)該在這里顯示.

Angular Router

  browse-product  
  buy-product 
  manage-product 
  operator-record

GPU云服務(wù)器云服務(wù)器初體驗(yàn) 初長成小白初小白初入

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102226.html

相關(guān)文章

在 Web 應(yīng)用中使用 ES7 裝飾器（Decorator）初體驗(yàn)

摘要：前言今天閑來時(shí)看了看中的新標(biāo)準(zhǔn)之一，裝飾器。過程中忽覺它和中的注解有一些類似之處，并且當(dāng)前版本的中已經(jīng)支持它了，所以，就動(dòng)手在一個(gè)應(yīng)用中嘗鮮初體驗(yàn)了一番。另外，由于裝飾器目前還是中的一個(gè)提案，其中具體細(xì)節(jié)可能還會(huì)更改。前言今天閑來時(shí)看了看ES7中的新標(biāo)準(zhǔn)之一，裝飾器（Decorator）。過程中忽覺它和Java中的注解有一些類似之處，并且當(dāng)前版本的TypeScript中已經(jīng)支持它了...

ivan_qhz 2019-08-19 17:27 評論0 收藏0
Lumen 初體驗(yàn)（二）

摘要：的現(xiàn)狀目前是版本，是基于開發(fā)。入口文件啟動(dòng)文件和配置文件框架的入口文件是。在路由中指定控制器類必須寫全命名空間，不然會(huì)提示找不到類。目前支持四種數(shù)據(jù)庫系統(tǒng)以及。使用時(shí)發(fā)生錯(cuò)誤，因?yàn)樵谖募?，的默認(rèn)驅(qū)動(dòng)是。最近使用 Lumen 做了 2 個(gè)業(yè)余項(xiàng)目，特此記錄和分享一下。 Lumen 的介紹在使用一項(xiàng)新的技術(shù)時(shí)，了解其應(yīng)用場景是首要的事情。 Lumen 的口號：為速度而生的 La...

Cheriselalala 2019-06-27 11:17 評論0 收藏0
Lumen 初體驗(yàn)

摘要：介紹為速度而生的框架。是官方給出的例子，直接拷貝命名為。一般來說，我們應(yīng)該避免使用末尾帶斜杠的。因?yàn)樗绻也坏轿募?，就?huì)自動(dòng)在末尾加個(gè)斜杠，嘗試尋找目錄下的文件等等，具體是在中配置。方案修改修改的配置文件，將指向重啟。介紹 Lumen：為速度而生的 Laravel 框架。 Lumen 是 Laravel 的作者（Taylor Otwell）的又一力作。簡單、快速、優(yōu)雅的它的特點(diǎn)...

Leck1e 2019-07-01 12:12 評論0 收藏0
React結(jié)合TypeScript和Mobx初體驗(yàn)

摘要：結(jié)合編輯器可以推導(dǎo)變量對應(yīng)的類型以及內(nèi)部的結(jié)構(gòu)，提高代碼的健壯性和可維護(hù)性。通過充分利用時(shí)間回溯的特征，可以增強(qiáng)業(yè)務(wù)的可預(yù)測性與錯(cuò)誤定位能力。對于對象的哪部分需要成為可觀察的，提供了細(xì)粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 為什么要使用TypeScript 偵測錯(cuò)誤通過靜態(tài)類型檢測可以盡早檢...

dreambei 2019-08-22 17:29 評論0 收藏0
前端小白的全棧初體驗(yàn)

摘要：原文來源全棧初體驗(yàn)前言據(jù)說現(xiàn)在不會(huì)點(diǎn)后臺(tái)的前端都找不到工作了嚇得我這幾天看起了和并且做了一個(gè)應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺(tái) 原文來源：全棧初體驗(yàn) 前言據(jù)說現(xiàn)在不會(huì)點(diǎn)后臺(tái)的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個(gè)應(yīng)該算是最簡單的前后...

wangym 2019-08-29 12:29 評論0 收藏0