Angular2 入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

除了使用Routernavigate()方法切换路由,Angular2还提供了一个指令用来 将一个DOM对象增强为路由入口

@View({
    directives:[RouterOutlet,RouterLink]
    template : `<nav>
                    <b router-link="video">video</b> | 
                    <b router-link="music">music</b>
                </nav>
                <router-outlet></router-outlet>`
})

RouterLink指令为宿主DOM对象添加click事件监听,在触发时调用Routernavigate()方法进行路由。

路由项别名

需要指出的是,RouterLink并不能直接使用路由项的路径,router-link属性 的值是一个路由项的别名,我们需要在路由配置时通过as属性,为路由项设定别名:

@RouteConfig([
    {path:"/video", component:EzVideo , as:"video"},
    {path:"/music", component:EzMusic , as:"music"}
])
在组件EzApp的模板中增加一个button,点击这个button则切换到EzMusic组件