名称

简介

Routes

路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件。

RouterOutlet

在HTML中标记路由内容呈现位置的占位符指令。

Router

负责在运行时执行路由的对象,可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定路由。

routerLink

在HTML中申明路由导航用的指令。

ActivatedRoute

当前激活的路由对象,保存着当前路由的信息,如路由地址,路由参数等。

实例:

1.创建一个Angular Router项目;(ng new Router -routing)

2.新建两个组件home和product;

  ng g component home

  ng g component product

完成后项目结构截图

3.配置app.routing.module.ts文件如下

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeeComponent} from "./homee/homee.component";
import {ProductComponent} from "./product/product.component"; const routes: Routes = [
{path: '', component: HomeeComponent},
{path: 'product', component: ProductComponent}
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

4.修改app.component.html文件如下

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a> <router-outlet></router-outlet>

保存,运行,angular router导航基础完成

使用Angular Router导航基础的更多相关文章

  1. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  2. Angular路由——路由基础

    一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置 ...

  3. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  4. Angular Route导航

    我们用Angular cli创建带有路由的新项目 ng new router --routing Angular Routes API文档 Angular的文档中有详细的解释: 1)https://a ...

  5. angular学习-入门基础

    angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...

  6. MVC route 和 Angular router 单页面的一些方式

    直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...

  7. angular 实现导航ng-click切换

    angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...

  8. Angular学习笔记—基础(转载)

    创建简单组件 新建组件 $ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simpl ...

  9. [Angular Router] Lazy loading Module with Auxiliary router

    Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different. ...

随机推荐

  1. socket__服务端于客户端

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/23 15:33 # @Author : Mr_zhang # @Site ...

  2. VIM格式化代码(How to format code with VIM)

    1) 按两下小写g,即gg,定位光标到第一行.(2) 按住Shift+v,即大写V,进入可视化编辑的列编辑模式.(3) Shift+g,即大写G,选中整个代码.(4) 按下等号=,格式化所有代码.

  3. BZOJ-1045-[HAOI2008] 糖果传递(中位数原理)

    Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正整数nn<=1'000'000,表示小朋友的个 ...

  4. Single Number2

    题目链接:http://oj.leetcode.com/problems/single-number-ii/ Given an array of integers, every element app ...

  5. UNIX发展史(BSD,GNU,linux)

    先前的一個理想 UNIX 系统自 1969 年 Ken Thompson 与 Dennis Ritchie 在美国贝尔电话实验室(Bell Telephone Laboratories)发展出雏形至今 ...

  6. 加载web项目时报的错误:Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modul

    用eclipse开发的java项目不能加载到tomcat6.0服务器,原因是:jst.web的版本高了 <installed facet="jst.web" version= ...

  7. Linux系统LVM基本使用

    一.关于LVM的几个概念 1. LVM:逻辑卷管理器,是建立在物理存储设备上的一个抽象层,允许你生成逻辑存储卷, 与硬件相关的存储设置被其隐藏,你不用停止应用或卸载文件系统来调整卷大小 或迁移数据,可 ...

  8. #1094 : Lost in the City by C solution

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi gets lost in the city. He does not know where he is ...

  9. angular指令中的preLink函数和postLink函数

    指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在,lin ...

  10. Windows环境下多线程编程原理与应用读书笔记(3)————Windows环境中的多线程实现(3)

    纤程 纤程(fiber): 相当于用户级别的线程或轻进程.纤程由Win32库函数支持,对核心是不可见的.纤程可以通过SwitchToFiber显示至另一合作纤程,以实现合作纤程之间的协同.线程是在Wi ...