Angular7.2.7路由初體驗

KevinYan 發布于2019-08-23 15:33 / 707人閱讀

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

記錄自己在學習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中導入模塊

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就是路由的出口, 表示路由對應的組件應該在這里顯示.

Angular Router

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

GPU云服務器云服務器初體驗初長成小白初小白初入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102226.html

在 Web 應用中使用 ES7 裝飾器（Decorator）初體驗

摘要：前言今天閑來時看了看中的新標準之一，裝飾器。過程中忽覺它和中的注解有一些類似之處，并且當前版本的中已經支持它了，所以，就動手在一個應用中嘗鮮初體驗了一番。另外，由于裝飾器目前還是中的一個提案，其中具體細節可能還會更改。前言今天閑來時看了看ES7中的新標準之一，裝飾器（Decorator）。過程中忽覺它和Java中的注解有一些類似之處，并且當前版本的TypeScript中已經支持它了...

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

摘要：的現狀目前是版本，是基于開發。入口文件啟動文件和配置文件框架的入口文件是。在路由中指定控制器類必須寫全命名空間，不然會提示找不到類。目前支持四種數據庫系統以及。使用時發生錯誤，因為在文件中，的默認驅動是。最近使用 Lumen 做了 2 個業余項目，特此記錄和分享一下。 Lumen 的介紹在使用一項新的技術時，了解其應用場景是首要的事情。 Lumen 的口號：為速度而生的 La...

Cheriselalala 2019-06-27 11:17 評論0 收藏0
Lumen 初體驗

摘要：介紹為速度而生的框架。是官方給出的例子，直接拷貝命名為。一般來說，我們應該避免使用末尾帶斜杠的。因為它如果找不到文件，就會自動在末尾加個斜杠，嘗試尋找目錄下的文件等等，具體是在中配置。方案修改修改的配置文件，將指向重啟。介紹 Lumen：為速度而生的 Laravel 框架。 Lumen 是 Laravel 的作者（Taylor Otwell）的又一力作。簡單、快速、優雅的它的特點...

Leck1e 2019-07-01 12:12 評論0 收藏0
React結合TypeScript和Mobx初體驗

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

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

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

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