Angular7.2.7路由初体验

KevinYan 发布于2019-08-23 15:33 / 625人阅读

摘要：记录自己在学习中对路由的理解路由不在的包中如果要使用的路由需要从中引入路由的使用子路由使用子路由使用方法父组件中在中导入模块然后在中加入即可就是路由的出口表示路由对应的组件应该在这里显示

记录自己在学习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

私有云海外云主机初体验初长成小白初小白初入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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