建站资讯

微信小程序微信商城_详解angular2完成ng2

作者:admin 发布时间:2021-01-12
详解angular2实现ng2-router 路由和嵌套路由       本篇文章主要介绍了详解angular2实现ng2-router 路由和嵌套路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

 实现ng2-router路由,嵌套路由

首先配置angular2的时候router模块已经下载,只需要引入即可

import {RouterModule, Routes} from "@angular/router";

我们要创建一个嵌套路由,所以需要创建以下文件

app.module.ts ponent.ts ponent.ts ponent.ts ponent.ts ponent.ts

实现效果:

路由,单机“ponent.ts 单机"ponent.ts 列表中包含嵌套路由,tab页 单机"标签一"ponent.ts 单机"标签二"ponent.ts

开始配置
<界面配置两点

head 标签中引入 meta href="/" rel="external nofollow" /

引入路由代码显示标签 引入主组件标签 my-app /my-app
<界面配置完毕

app.module.ts界面配置路由

 import {BrowserModule} from "@angular/platform-browser";
 import {NgModule} from "@angular/core";
 import {RouterModule, Routes} from "@angular/router";
 // 表单 双向数据绑定
 import {FormsModule} from "@angular/forms";
 import {AppComponent} from "./ponent";
 // List中包含两个tab子组件
 import {ListComponent} from "./ponent";
 import {ListOneComponent} from "./ponent";
 import {ListTwoComponent} from "./ponent";
 import {HomeComponent} from "./ponent";
 // 定义路由, bootstrap默认加载组件就是AppComponent,所以他就是导航页,然后添加的路由都在他的模板中。
 // 可以所有代码写在NgModule中, 也可以这样自定义常量,然后使用。
 // 定义常量 嵌套自路由
 const appChildRoutes: Routes = [
 {path: "one", component: ListOneComponent},
 {path: "two", component: ListTwoComponent},
 // 如果地址栏中输入没有定义的路由就跳转到one路由界面
 path: '**', redirectTo: "one"
 // 定义常量 路由
 const appRoutes:Routes = [
 {path: '', component: HomeComponent},
 path: 'list',
 component: ListComponent,
 children: appChildRoutes
 // 引用定义的路由
 @NgModule({
 imports: [
 BrowserModule,
 FormsModule,
 RouterModule.forRoot(appRoutes)
 declarations: [
 AppComponent,
 ListComponent,
 HomeComponent,
 ListOneComponent,
 ListTwoComponent
 bootstrap: [AppComponent]
 export class AppModule {

这样就完成了嵌套路由的配置

显示路由内容

 import {Component} from "@angular/core";
 @Component({
 selector: "my-app",
 // templateUrl: "../"
 template: `
 div 
 !--使用了bootstrap样式的导航,routerLinkActive,表示路由激活的时候,谈价active类样式-- 
 li routerLinkActive="active" a routerLink="home" 首页 /a /li 
 li routerLinkActive="active" a routerLink="contact" 联系我们 /a /li 
 li routerLinkActive="active" a routerLink="product" 产品 /a /li 
 /ul 
 !--路由内容显示区域-- 
 router-outlet /router-outlet 
 /div 
 export class AppComponent {
 import {Component} from "@angular/core";
 @Component({
 selector: "my-list",
 // templateUrl: "../"
 template: `
 div 
 !-- 子路由连接 -- 
 a routerLink="one" one /a 
 a routerLink="two" two /a 
 !-- 路由内容显示标签 -- 
 router-outlet /router-outlet 
 /div 
 export class ListComponent {
 name = "list";

ponent.ts

 import {Component} from "@angular/core"
 @Component({
 selector: "my-list-one",
 template:`
 {{name}}
 export class ListOneComponent {
 name = "list-one";
 }

ponent.ts同理

获取路由参数id (about:id) 添加模块 ActivatedRoute

 import {ActivatedRoute} from "@angular/router"; 
 export class AboutList {
 id: Object;
 constructor(public route:ActivatedRoute) {
 this.id = {};
 ngOnInit() {
 this.route.params.subscribe(params = {
 this.id = params // {id: "xxx"}

直接获取id值

 this.route.sna凡科抠图hot.params["id"]
补助: 路由中的界面跳转
 import {Router} from "@angular/router";
 constructor(public router: Router) {
 // 相当于window.location.href,界面跳转
 router.navigateByUrl('home');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩