angular 守卫路由


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';
import { ProductDescComponent } from './product-desc/product-desc.component';
import { SellerInfoComponent } from './seller-info/seller-info.component';
import { ChatComponent } from './chat/chat.component';
import { LoginGuard } from './guard/login.guard';
import { UnsacedGuard } from './guard/unsaced.guard';
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'chat',
component: ChatComponent,
outlet: 'aux'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'product/:id',
component: ProductComponent,
children: [
{ path: '', component: ProductDescComponent },
{ path: 'seller/:id', component: SellerInfoComponent }
],
canActivate: [LoginGuard],
canDeactivate: [UnsacedGuard]
}
,
{
path: '**',
component: Code404Component
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [LoginGuard, UnsacedGuard]
})
export class AppRoutingModule { }
angular 守卫路由的更多相关文章
- Angular 4 路由介绍
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...
- angular -- ng-ui-route路由及其传递参数?script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
- angular 之路由
1.用angular-cli建一个工程自带路由怎么做? 命令:ng new 项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- Angular 4 路由守卫
路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...
- angular 2+ 路由守卫
1. 定义接口名称 /domain/login-guard.ts export interface LoginGuard { data: any; msg: string; status: boole ...
- angular的路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...
- angular中路由的实现(针对新手)
最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...
随机推荐
- java代码 求和1+1/2+1/3+1/4+1/5+1/6+.......+1/n 的值~~~~
总结:很简单的练习: s=1+1/2+1/3+1/4+1/5+1/6+.......+1/n的值:注意这里的s是float型,绝对记住不能留整数型 即s+=1/i; package com.c2; i ...
- win10 Edge 无法上网代理服务器错误
当连接好网络时 Edge无法上网,提示代理服务器错误,系统其他非第三方软件同样网络异常 解决:为当前所连接的网络更新自动检测 控制面板->网络和Internet->Internet选项-& ...
- Linux学习笔记 -- 文本编辑器之 vi与vim
vi/vim 的使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Command mode),插入模式(Insert mode)和底线命令模式(Last line mode). 这三种模式的 ...
- C#获取网络状态
/// <summary> /// 获取网络状态 /// </summary> /// <param name="ip">目标IP地址</ ...
- Linux性能监测:网络篇
网络的监测是所有 Linux 子系统里面最复杂的,有太多的因素在里面,比如:延迟.阻塞.冲突.丢包等,更糟的是与 Linux 主机相连的路由器.交换机.无线信号都会影响到整体网络并且很难判断是因为 L ...
- 用yum下载rpm包(不安装)到指定目录
用yum下载rpm包(不安装)到制定目录 用yum下载rpm包 1.安装yum-downloadonly # yum install yum-downloadonly -y 2. ...
- python's twenty-second day for me 封装,property方法
面对对象的三大特性:继承,多态,封装. 函数和属性装到了一个非全局的命名空间----封装. 封装: 在类中,静态属性,方法,对象属性都可以变成私有的,只需要在这些名字前加上‘__’(双下划线). 在类 ...
- Java和C#中的自定义元数据
Java的annotation和C#的Attribute,可用来为语言增加语义,定义元数据. 转自:http://rednaxelafx.iteye.com/blog/464889 http://bl ...
- 01Javascript简介
01 - Javascript 简介 web前端有三层: HTML:从语义的角度, 描述页面结构 CSS: 从审美的角度,描述样式(美化页面) JavaScript: 从交互的角度 , 描述行为(提升 ...
- leetcode452
public class Solution { public int FindMinArrowShots(int[,] points) { // multidimensional array cann ...