My Angular App

Question

我试图在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 ..

从＆＃39; ../../ Components / Contacts / ContactsRouting / Contacts.routing＆＃39;;

{
    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 ....

模板：`

My Angular App

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>

Answer 1

我假设您有一个文件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

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

My Angular App

1 个答案: