首页 文章

我如何在Angular2中为父路由和子路由创建两个ts文件？

提问于
浏览 次
0

我试图在Angular2路线的帮助下开发一个应用程序 . 我的项目很简单 .

让我们先解释一下 . 在主页中，我有2个导航按钮 . 一个 . 家 . 湾联系我们 . 所以，1 . 我做了一个ts文件名： - app.route.ts ..我在哪里提到2路径

{
    path : 'myapps/contact', component : ContactComponent,
},
{
    path : 'myapps/home', component : HomeComponent
},

2.在app.component.ts部分，我使用了以下代码，

<nav>
  <a routerLink="myapps/home" routerLinkActive="active">Home</a>
  <a routerLink="myapps/contact" routerLinkActive="active">Contact</a>
</nav>

到目前为止，我的计划完美无缺 . 但在那之后，我添加了一些功能..我将我的联系人详细信息分为两部分 . 一个 . 邮件联系人和b . 电话联系..

这里创造了问题 . 当我将这两个Contact的子项添加到app.routing.ts中时，它再次开始工作 . 喜欢，

{
    path : 'myapps/contact', component : ContactComponent,
      children: [
        { path: '', redirectTo: 'mail', pathMatch: 'full' },
         { path : 'mail', component : MailComponent },
        { path : 'phone', component : PhoneComponent },

      ]
},

但我想为此路由制作两个单独的文件...

  • app.routing.ts我会提到母亲路由，如家庭，联系人和

  • contact.routing.ts我想提到邮件和电话等联系人的子路由 .

我如何隔离这些部分......？

请建议我任何人..提前感谢您的关注 .

完全代码在这里.....

app.module.ts ..

从'../../Components/Contacts/ContactsRouting/Contacts.routing'导入;

{
    path: '',
    redirectTo: '/myapps/home',
    pathMatch: 'full'
},
{
    path : 'myapps/contact', component : ContactComponent,
    children: [
        { path: '', redirectTo: 'mail', pathMatch: 'full' }
     ]
},
{
    path : 'myapps/home', component : HomeComponent
},
{
    path: '**',      component: PageNotFoundComponent
}
];

app.component.ts ....

模板：`

我的角色应用程序

主页联系

contact.routing.ts

{
    path : 'mail', component : MailComponent
},
{
    path : 'phone', component : PhoneComponent
}
];

Component.contact.ts

模板：

<nav>
          <a routerLink="mail" routerLinkActive="active">Mail</a>
          <a routerLink="phone" routerLinkActive="active">Phone</a>
     </nav>
     <router-outlet></router-outlet>
angular angular2-routing

1 回答

  • 0

    我假设你有一个文件 contact.routes.ts

    import { Routes } from '@angular/router';

import { MailComponent } from './Component.mail';
import { PhoneComponent } from './Component.phone';

export const contactRoutes : Routes = [
    {path: '', redirectTo: 'mail', pathMatch: 'full' },
    {path : 'mail', component : MailComponent },
    {path : 'phone', component : PhoneComponent  }
];

    然后现在在app.route.ts中你需要这样做

    //keep everytning esle and add this following line
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './Component.home';
import { ContactComponent } from './Component.contact';

import { contactRoutes } from './Contacts.routing';

const appRoutes : Routes = [
     {
        path : '', component : HomeComponent
    },
    {
        path : 'contact', component : ContactComponent,
        children: [

            ...contactRoutes
        ]
    },


];

export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes);

    请记住，您需要更新网址和名称 . 工作演示：http://plnkr.co/edit/qfayHJWjqItFMWuQWfcs?p=preview

    回复于

相关问题