使用Angular Router导航基础
名称 |
简介 |
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导航基础的更多相关文章
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- Angular路由——路由基础
一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置 ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- Angular Route导航
我们用Angular cli创建带有路由的新项目 ng new router --routing Angular Routes API文档 Angular的文档中有详细的解释: 1)https://a ...
- angular学习-入门基础
angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...
- MVC route 和 Angular router 单页面的一些方式
直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...
- angular 实现导航ng-click切换
angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...
- Angular学习笔记—基础(转载)
创建简单组件 新建组件 $ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simpl ...
- [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. ...
随机推荐
- socket__服务端于客户端
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/23 15:33 # @Author : Mr_zhang # @Site ...
- VIM格式化代码(How to format code with VIM)
1) 按两下小写g,即gg,定位光标到第一行.(2) 按住Shift+v,即大写V,进入可视化编辑的列编辑模式.(3) Shift+g,即大写G,选中整个代码.(4) 按下等号=,格式化所有代码.
- BZOJ-1045-[HAOI2008] 糖果传递(中位数原理)
Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正整数nn<=1'000'000,表示小朋友的个 ...
- Single Number2
题目链接:http://oj.leetcode.com/problems/single-number-ii/ Given an array of integers, every element app ...
- UNIX发展史(BSD,GNU,linux)
先前的一個理想 UNIX 系统自 1969 年 Ken Thompson 与 Dennis Ritchie 在美国贝尔电话实验室(Bell Telephone Laboratories)发展出雏形至今 ...
- 加载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= ...
- Linux系统LVM基本使用
一.关于LVM的几个概念 1. LVM:逻辑卷管理器,是建立在物理存储设备上的一个抽象层,允许你生成逻辑存储卷, 与硬件相关的存储设置被其隐藏,你不用停止应用或卸载文件系统来调整卷大小 或迁移数据,可 ...
- #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 ...
- angular指令中的preLink函数和postLink函数
指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在,lin ...
- Windows环境下多线程编程原理与应用读书笔记(3)————Windows环境中的多线程实现(3)
纤程 纤程(fiber): 相当于用户级别的线程或轻进程.纤程由Win32库函数支持,对核心是不可见的.纤程可以通过SwitchToFiber显示至另一合作纤程,以实现合作纤程之间的协同.线程是在Wi ...