发表于： 2017-06-14 23:30:20

2 1072

今天完成的事情：


1.学习大漠老师的nicefish项目


2.分出2级路径，添加子路由

子路由有2个：one和two。其中one下面还有一层路径叫three。结构如下：


/playground---|

              |/one

              |--------|three

              |/two


路由模块代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PlaygroundComponent } from './playground.component';

const routes: Routes = [
{
path: '',
component: PlaygroundComponent
},
];

@NgModule({
imports: [ RouterModule.forChild(routes) ],
exports: [ RouterModule ],
})
export class PlaygroundRoutingModule { }

在模块的根路由下添加one和two，Angular在路由定义数组中对于每个路由定义对象都有一个属性叫做children，就是指定子路由的地方。所以把one和two都放入了children数组中。

import { PlaygroundComponent } from './playground.component';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

const routes: Routes = [
{
path: '',
component: PlaygroundComponent,
children: [
{
path: 'one',
component: OneComponent,
},
{
path: 'two',
component: TwoComponent
}
]
},
];

显示路由指向的组件，在PlaygroundComponent的模版中放入路由插座就完成了：

<ul>
<li><a routerLink="one">One</a></li>
<li><a routerLink="two">Two</a></li>
</ul>

<router-outlet></router-outlet>


明天计划的事情：

      继续学习angular


问题：

     <app-todo>中的 (textChanges)="onTextChange($event)" 这条的 textChanges 是子组件的output，而 onTextChange 则是父系组件的method,

子output =父method不好理解。


收获：

      子路由的概念


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1