[Angular] Router outlet events
For example, we have a component which just simply render router-outlet:
import { Component } from '@angular/core'; @Component({
selector: 'mail-app',
styleUrls: ['mail-app.component.scss'],
template: `
<div class="mail">
<router-outlet></router-outlet>
</div>
`
})
export class MailAppComponent {}
export const ROUTES: Routes = [
{ path: 'folder/:name', component: MailFolderComponent }
];
We can add events to router-outlet:
import { Component } from '@angular/core'; @Component({
selector: 'mail-app',
styleUrls: ['mail-app.component.scss'],
template: `
<div class="mail">
<router-outlet
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
></router-outlet>
</div>
`
})
export class MailAppComponent {
onActivate(event) {
console.log(event)
} onDeactivate(event) {
console.log(event)
}
}
When we log out the, we see the actual component been rendered into the router-outlet.
[Angular] Router outlet events的更多相关文章
- 使用Angular Router导航基础
名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- [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. ...
- MVC route 和 Angular router 单页面的一些方式
直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...
- [Angular 2] Using events and refs
This lesson shows you how set listen for click events using the (click) syntax. It also covers getti ...
- [Angular] Progress HTTP Events with 'HttpRequest'
New use case that is supported by the HTTP client is Progress events. To receive these events, we cr ...
- angular router ui bug !
https://github.com/angular-ui/ui-router/issues/600 https://github.com/angular-ui/ui-router/issues/22 ...
- [Angular] Adding keyboard events to our control value accessor component
One of the most important thing when building custom form component is adding accessbility support. ...
- [Angular2 Router] Setup page title with Router events
Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...
随机推荐
- ELK之日志查询、收集与分析系统
项目由来 (1)开发人员不能登录线上服务器查看详细日志,经过运维周转费时费力 (2)日志数据分散在多个系统,难以查找与整合 (3)日志数据量巨大,查询速度太慢,无法满足需求 (4)无法全局掌控项目运行 ...
- activity 接回返回值
activity 接回返回值 今天做订单列表显示 点击某一项显示订单详细信息,在详细activity中用户可以选择取消订单(未支付的状态下)当用户取消订单后订单列表也要改变状态,原来最初做法是所加载绑 ...
- Pairs Forming LCM
题目: B - Pairs Forming LCM Time Limit:2000MS Memory Limit:32768KB Description Find the result of ...
- CSRF Failed: Referer checking failed - no Referer
postman模拟登录出了这个错误,其实看标题就知道大概是怎么回事,网上大概找了办法,也没说到位,所以干脆自己找源码了. 问题很明显就是出在 CSRF 上,理所当然去查看 CsrfViewMiddle ...
- ActivityChooserView-如何隐藏选择的应用图标
今天在修改一个问题的时候,用到了ActivityChooserView类,但是,这个类会自动显示两个按钮,一个是点击有下拉框的,一个是选择应用以后,显示应用图标的.因为应用图标跟当时的环境非常的不搭, ...
- elasticsearch 源码概述
从功能上说,可以分为两部分,分布式功能和数据功能.分布式功能主要是节点集群及集群附属功能如restful借口.集群性能检测功能等,数据功能主要是索引和搜索.代码上这些功能并不是完全独立,而是由相互交叉 ...
- 第三次作业 201731082208 黄亚恒&肖莉
Github项目地址:https://github.com/HYHSTUDEY/WordCount.git 作业地址:https://www.cnblogs.com/hyhhyh090628/p/10 ...
- 如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...
- linux网站发布操作流程
Linux 添加用户命令: useradd bm -g webTemp http://www.runoob.com/linux/linux-vim.html Linux关于网站发布操作流程 虚拟机地下 ...
- 洛谷 P2299 Mzc和体委的争夺战
洛谷 P2299 Mzc和体委的争夺战 题目背景 mzc与djn第四弹. 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁(做过前三弹的都知道).但如此之多的男家丁吸引来了我们的体委(矮胖小伙), ...