Question

我有一个仪表板，其中包含指向“个人资料”页面的链接。当用户进入“个人资料”页面时，它会显示他的个人资料，其中包基本信息，投资组合，爱好等。每个部分都有一个点击添加按钮，显示添加部分表格（例如添加投资组合）

信息中心网址：/dashboard/

个人资料网址：/dashboard/profile/

添加投资组合网址：/dashboard/profile/portfolio/new

修改投资组合网址：/dashboard/profile/portfolio/edit/:id

我想要的是，当用户点击“添加项目组合”按钮时，它应显示“项目组合”列表正上方的“添加项目组合”表单，而不会替换完整的配置文件。类似地，当点击对应于投资组合记录的编辑链接时，它应该在列表上方显示“编辑投资组合”表单。

我是Angular2路由的新手，可以做简单的路由，但是如果我用我当前的方法实现它，我最终得到的链接在点击时替换了Profile页面的全部内容，可能是因为它只有一个路由器出口。

任何帮助，可能是一名证明上述情况的掠夺者都将受到高度赞赏。

Answer 1

添加投资组合表单应该是投资组合页面的一部分，而不是它自己的页面（即它们不应该有单独的URL）。

您可以将“添加投资组合”表单添加到其自己的组件中，并将其初始设置为隐藏。假设您使用选择器AddPortfolio制作了add-portfolio组件，那么在您的投资组合组件的HTML中，您可以拥有例如。

<add-portfolio [hidden]="hide"></add-portfolio>

然后在AddPortfolio类中，您有一个布尔字段hide，最初为true，并在添加按钮单击时设置为false。

Answer 2

如果您想为创建和编辑投资组合方案分隔url，我可能会为您提供以下网址分区：

信息中心网址：/dashboard/view - ＆gt;仪表板下的所有配置文件

个人资料网址：/dashboard/profile/

添加投资组合网址：/dashboard/profile/portfolio/new

修改投资组合网址：/dashboard/profile/portfolio/edit/:id

您的入口点文件将如下所示：

App.ts

...
@RouteConfig([
  { path: '/dashboard', component: DashboardRoutedComponent, name: 'Dashboard' }
])
export class App {  }
}
...

DashboardRoutedComponent - 我们将命名最终用作路由目的的组件，如RoutedComponent

App.html

@Component({
  selector: 'app',
  providers: [ ...FORM_PROVIDERS ],
  directives: [ ...ROUTER_DIRECTIVES ],
  template: `
    <header>
    </header>

      <router-outlet></router-outlet>

    <footer>
    </footer>
  `
})

您的DashboardRoutedComponent goint定义子路线

DashboardRoutedComponent.ts

@Component({
    selector:   'someSelectorDoesntMatter',
    template: '<router-outlet></router-outlet>' -->that's why we name it routed component
    directives: [
        ROUTER_DIRECTIVES
    ]
})
@RouteConfig([
    {
        path: '/view',
        name: 'View',
        useAsDefault: true,
        component: DashboardViewComponent,  --> here you going to display list of profiles
        data: { name: 'View' }
    },
    {
        path: '/profile/...',  --> here we show that component going to have child routes
        name: 'Profile',
        component: ProfileRoutedComponent,
        data: { name: 'Profile' }
    }
])
export class DashboardRoutedComponent {}

ProfileRoutedComponent将具有相同的view \ edit \ new结构。

为了在新的\ edit场景中获得投资组合列表，他们将共享some portfolio list component，并且一旦新的\ edit组件组件共享相同的服务以获取数据，它将重新呈现。

我会用plunk更新答案

Angular2嵌套路由

2 个答案:

App.ts

App.html

DashboardRoutedComponent.ts