标签: angular2-routing

我有一个仪表板应用程序,它包含一个树视图组件(列出各种内容节点)和一个仪表板编辑组件,它根据树的哪个分支选择呈现一些可编辑的内容.

例如,树是这样的:

- Football
- - Premier League
- - - Arsenal
- - - Chelsea
- - - ...etc
- - Championship
- - - Derby
- - - ...etc

单击树中的"Arsenal",它会在页面上的可编辑面板中为该团队呈现一些内容.

呈现子组件的组件如下所示:

@Component({
    selector: 'my-dashboard',
    template: `
        <div class="tree-panel-container">
            <div class="tree-panel-content">
                <content-tree [startNodeId]="startNodeIdContent"></content-tree>
            </div>
        </div>
        <router-outlet></router-outlet>
    `,
    directives: [
        ContentTreeComponent, 
        ContentDashboardComponent, 
        RouterOutlet
    ],
    providers: [
        HTTP_PROVIDERS
    ]
})

可编辑内容以一定的形式呈现,router-outlet使得每个可编辑的内容具有其自己的不同URL,例如example.com/content/edit/123,其中123是阿森纳内容的id.

一切正常.

但是,我想要做的是能够访问组件中的idroute参数content-tree.目前,我很确定我在该组件中的代码应该有效:

import {Component, Input, OnInit}   from '@angular/core'; …

我们正在努力实现Angular 2的结构,并试图决定Angular 2是否适合我们.

我们假设;

• 有一个应用程序只包括侧面导航菜单,标题和容器.
• 项目中有一百页(每个页面都包含大量的业务表单).每种形式都是独立的模块.
• 有3个团队参与了这个项目.
• 用户将启动这些表单并在容器中查看.
• 每个页面都使用相同的共享模块,如@ angular,core-js,rxjs,zone.js等.

有了这样的应用,我们希望所有团队成员在需要时单独和单独构建和部署每个表单.我们还希望每个团队成员都能在一个相关的表单上工作,就像它是一个不同的项目一样.

我想我们在实时服务器中有以下文件夹结构.是不是真的有办法实现这一目标？

这是部署的文件夹组织

这是项目文件

在page-99完成开发之后,我只想构建和部署自己(如Dist文件夹中所示).之后,主应用程序将在加载该组件时注入服务.

Angular 2真的可以吗？

提前感谢大家与我分享您的想法和信息.

我现在有以下模板

<project-form [nextId]="projects.length" (newProject)="addProject($event)"></project-form>
<project-list [projects]="projects"></project-list>

在ProjectAppComponent中.

class ProjectAppComponent {
    projects: Project[] = [
        { id: 0, title: "Build the issue tracker" },
        { id: 1, title: "Basecamp" },
    ]

    addProject(project: Project) {
        this.projects.push(project);
    } 
}

ProjectAppComponent具有项目数组和将新项目推入其中的方法.我想创建子路由项目的形式和项目名单,所以我可以做的/projects/new,并/projects/show表现出任何形式或列表.我创建了这样的路线配置 -

@Component({
    template: `
        <div>
            <router-outlet></router-outlet>
        </div>
    `,
    directives: [ RouterOutlet ]
})
@RouteConfig([
    { path: '/list', name: 'ProjectList', component: ProjectListComponent, useAsDefault: true },
    { path: '/new', name: 'ProjectForm', component: ProjectFormComponent },
])
class ProjectAppComponent {
    projects: Project[] = …

在Angular App
Angular 2应用程序中实现Child Routes的演示应用程序, 显示错误

 Error: Uncaught (in promise): Error: Cannot match any routes: 'movie-home'
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'movie-home' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'movie-home'(…)

如果我不从文件movie.routes.ts添加这些代码行,应用程序工作正常

{
    path:'movie-home',
    component:HomeComponent,
    //Remove this block of code- Start
    children:[
        {path : 'animation' , component:AnimationComponent},
        {path : 'action' , component:ActionComponent}
    ]**
    //Remove this block of code.- End
}

我已将代码推送到GITHUB
克隆 - https://github.com/Sandeep3005/Angular101.git
查看 - https://github.com/Sandeep3005/Angular101

文件结构是
app
   | …

const APP_ROUTES: RouterConfig = [

    {

        path: 'app/home',
        component: HomeComponent,
        data: {
          name: 'Home'
        }

    }


]

如果我有如上所示的路由配置,我如何data从某个指令访问其属性.

@Directive({
  name: 'hello'
})

class HelloDirective {
 @Input('routerLink') link: string[];

 ngOnInit() {
    //HOW CAN I GET ROUTE AND ITS DATA FROM PATH/URL ???

    //const magicallyGrabbedRoute = pleaseGiveMeMyRouteFrom(this.link);
    //const myData = magicallyGrabbedRoute.data;

 }

}

<a hello [routerLink]="['app/home']"> Go Home </a>

在hello指令中如何获取routerLink属性值的路由配置？

Angular 2 final已经发布,我一直在玩最终的路由器版本.

可以在此处找到路由器的一个很好的示例:http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2？p = preview

我想知道是否有任何机制可以保持当前模块在DOM(但隐藏)中呈现,同时在顶部加载新模块？这里的用例是,用户可能正在使用Admin-type模块并意识到他们需要创建一些资产(可能是用户),因此跳转到Users模块进行创建; 然后跳回到他们在Admin模块中的位置.

在这种情况下,用户可能处于Admin模块的某个深层链接部分,这将是他们失去他们正在做的事情的非常奇怪的行为.

这可能吗？从我到目前为止所做的一切,我已经看到<router-outlet>标签中显示的模块完全从DOM中删除.

谢谢!

我正在显示一系列您可以点击的项目,带您到下一个路线.您也可以单击此页面上的弹出窗口.如果单击弹出窗口,然后在显示下一个路径之前单击其中一个要销毁弹出窗口的项目.

onSelect(id) {
    if (this.router.url.includes('popup')) {

      let p = Promise.resolve(() => this.closePopup())
      p.then(() => this.router.navigate(['/', id]))

    } else {

      this.router.navigate(['/', id])

    }
  }

closePopup() {
    this.router.navigate([{outlets: {popup: null}}])
  }

我真的不明白promises所以我不确定我是用正确的结构编写的,但是这段代码没有用,因为它总是导航到下一个路径,弹出窗口仍然在URL中.我试图在promise之外的相同结构中执行它,但它总是会导航到:id仍然在URL中的(popup).

我也尝试过:this.router.navigate(['/', id, {outlets: {popup: null}}]).

路由器中是否有一个允许绝对重写URL的功能？或者有没有办法确保它在导航到:id之前从URL中删除弹出窗口.

希望问题很清楚 - 非常感谢帮助!

我希望能够为某些路由使用相同的路由器插座.

路由设置(简化):

export const routes: Routes = [
    {
        path: 'app', component: AppComponent,
            children: [
                path: 'category/:id', component: CategoryComponent,
                children: [
                    { path: 'post/:id', component: PostComponent }
                ]
            ]
    }
];

例如,我们有这条路径:

/app/category/1/post/1

那打破了

/app - AppComponent
|_ /catory/1 - CategoryComponent
   |_/post/1 - PostComponent

该AppComponent有<router-outlet>哪些渲染CategoryComponent,也应该呈现的PostComponent时候这条路线是有效的.

这类问题的常见答案:

移动子路由并将其添加到app-route children数组中

不,这不是正确的方法.我们仍然需要我们的路线层次结构.CategoryComponent可能知道PostComponent没有的东西- 比如Breadcrumb命名

所以我们仍然希望我们的CategoryComponent加载.(即使它的视图不是渲染)

使用<router-outlet>内部CategoryComponent

否.CategoryComponent不应该负责它自己的<router-outlet>.本PostComponent应在地方的渲染CategoryComponent,并添加CSS来放置它这样应该是非法的.

我怎样才能实现这种行为？

我需要编写自己的路由器插座吗？ …

我已经部署了一个带有延迟加载的角度应用程序.该应用程序在Github.io域上托管时工作正常,但是当我使用mobaxterm在tomcat服务器上部署应用程序时出现错误.当页面重新加载或刷新时,应用程序将丢失路由状态并引发404错误.

HTTP状态404 - /查询

类型状态报告

消息/查询

description请求的资源不可用.

Apache Tomcat/7.0.72

Console-Log :: GET http://appv2.proctur.com/enquiry/addEnquiry 404(未找到)导航至http://appv2.proctur.com/enquiry/addEnquiry

如果我不刷新页面并一次性使用该应用程序就可以了,只是无法理解刷新时的问题.

PS ::这是我第一次在tomcat服务器上托管角度应用程序如果我犯了任何愚蠢的错误请告诉我.

为了更好地澄清,我添加了routing.module.ts,其中我懒惰加载模块.这被导入到app.module.ts ::

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: '/authPage', pathMatch: 'full' },
        { path: 'authPage', loadChildren: 'app/components/auth-page/auth-page.module#AuthPageModule' },
        { path: 'course', loadChildren: 'app/components/course/course.module#CourseModule' },
        { path: 'enquiry', loadChildren: 'app/components/enquiry/enquiry.module#EnquiryModule' },
        { path: 'student', loadChildren: 'app/components/students/student.module#StudentModule' },
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {
}

有没有人知道用百分比指示器实现Angular 2+预加载器的良好解决方案(类似于Gmail的加载屏幕)？

我知道通常的方法是添加<div>内部我们的<app-root>风格,甚至可以添加CSS动画,一旦应用程序加载,它将被应用程序内容替换.

但是......我实际看的是显示动画启动画面(SVG或其他任何内容),在动画完成后,应该出现加载栏并显示进度状态.

在第一点,我正在考虑单独的splash组件,它将只是组件急切加载并从那里加载所有其他模块但是如果我将该组件映射到'/'如何在任何其他路由上显示它作为第一个(起始点).此外,这意味着必须已加载Angular主包,因此这不是一个好的选择.

很可能这个问题太宽泛而且不适合Stack Overflow,但我找不到任何好的解决方案.:(

有没有办法加载没有Angular的纯JavaScript,它将加载Angular并显示进度？还是其他(更好)的想法？

这必须是可以实现的,因为整个Gmail都是Angular应用程序而且它们拥有它:D