标签: angular2-routing

在Angular 2中,您可以@CanActivate为组件指定注释,您可以在其中确定是否应激活组件.它不是接口的原因是因为在组件被实例化之前调用了回调.问题是,我无法找到一种方法来将依赖注入到该回调中.我需要我的服务,告诉我我是否登录(以及作为谁)以确定是否允许路由到特定组件.

如何将依赖项注入@CanActivate回调？我正在使用ES5,但这不起作用:

app.ListsComponent = ng.router.CanActivate([
    app.SessionService,
    function(session, instruction) {
        console.log(session);
        return true;
    }
])(app.ListsComponent);

编辑:或者,我可以routerOnActivate在组件上使用生命周期事件,并使用它this.router.navigate来发送用户,如果他们不应该在那里.缺点是它会破坏浏览器历史记录:如果每次到达特定URL时我都会异步重定向您,则无法在浏览器中非常有用地使用"后退"按钮.有没有办法router.navigate使用history.replaceState而不是history.pushState这种情况？

当用户在浏览器选项卡中手动更改路径并按Enter键时,我遇到了问题.这迫使我的ui-router/angular2-router导航到用户输入的状态.我想阻止这种情况,并且只允许通过我在网站上点击按钮实现的流程进行路由.

我已将angular2项目升级为RC5使用angular-cli@webpack.

我提供如下路由:

const appRoutes: Routes = [
    { path: 'project-manager', component: ProjectManagerComponent },  
    { path: 'designer/:id', component:DesignerComponent } ,
    {path: '',redirectTo: '/project-manager',pathMatch: 'full'} 
];

我使用routerLink重定向到设计器组件:

<a [routerLink]="['/designer', page._id]"><i class="fa fa-eye fa-fw"></i></a>

现在它被重定向成功,我能够在浏览器的地址栏中看到param值.

现在我想知道,如何在angular2 RC5中的DesignerComponent中访问此参数.

我有三个组件,每个组件都有自己的解析器,可以从不同的API中获取数据.为此,这些组件依赖于使用服务在它们之间共享的URL.

我希望当对该URL发生更改时,每个组件都会重新加载,即重新启动解析器.

我看了几个相关的SO问题,但没有提到在使用解析器时如何这样做,cf:问题1,问题2,问题3

我可以想到两种方式:

脏方法:使用路由器重定向和空白组件强制刷新组件.

this.router.navigateByUrl('blank',true);
this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)');

但那没用.有一个刷新,但解析器没有......解决.

另一种方法:使用BehaviorSubject或ChangeDetectorRef.但是,我对如何实现它一无所知,考虑到检测到组件内的变化无法帮助我实际重启解析器.

我的感觉是,这必须通过路由器以某种方式完成,因为它是了解解析器的人:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children : [
      {
        path: '',
        component: BlankComponent
      },
      {
        path: 'simil',
        component: SwComponent,
        outlet: 'sw',
        resolve: {
          data: SwResolve
        }
      },
      {
        path: 'sales',
        component: SalesComponent,
        outlet: 'sf',
        resolve: {
          data: SalesResolve
        }
      }
    ]
  },
  {
    path: 'blank',
    component: BlankComponent
  }
];

有关如何实现这一目标的任何提示？

编辑:这是相关的plunkr …

可以将静态数据传递给Angular 2路由而不在URL上显示它.

但是如何以相同的方式传递动态数据/对象？

我今天刚刚将我的应用程序切换为延迟加载.
我有一个SharedModule导出一堆服务.在我AppModule,我导入SharedModule因为AppComponent需要访问一些共享服务.

在另一个模块中FinalReturnModule,我导入SharedModule.在我的一个服务中,我console.log('hi')在构造函数中添加了一个.

当应用程序首次加载时,我会hi进入控制台.每当我导航到我内心的页面时,FinalReturnModule我会hi再次进入.显然,由于有两个实例,因为模块无法通信,所以没有任何工作正常.

如何阻止服务实例化两次？

编辑:背景,该应用程序使用angular-cli构建.

当前版本:

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 ia32
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.1.1
@angular/compiler-cli: 2.4.1

我有一个角度2组件,需要导航到另一个路线,但在不同的浏览器选项卡中.下面的代码在同一浏览器选项卡中导航.

    import { Component } from '@angular/core';
    import { Router } from '@angular/router';

    @Component({
         templateUrl: 'quotes-edit.component.html'
    })

    export class QuoteComponent {
         constructor(private router: Router) {
         }

         this.router.navigate(['quote/add']);
    }

我已经实施了一个CanDeactivate警卫,以避免用户在上传过程中离开页面并且它可以工作.问题是我的消息始终是默认消息(由于浏览器语言而在荷兰语中),甚至自己设置消息,仍然显示相同的默认confirm窗口.我想写自己的消息(实际上我有一个我想要显示的模态,但首先我希望看到我的简单消息工作)

任何想法可能是什么？我错过了什么吗？提前致谢!

这是代码

守护.

    import { Injectable, ViewContainerRef } from '@angular/core';
    import { CanDeactivate } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    import { DialogService } from '../services';

    export interface PendingUpload {
        canDeactivate: () => boolean | Observable<boolean>;
    }
    @Injectable()
    export class PendingUploadGuard implements CanDeactivate<PendingUpload> {
        constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }

        canDeactivate(component: PendingUpload): boolean | Observable<boolean> {

            return component.canDeactivate()
                ? true
                : confirm("Test custom message");

               //dialog I want to use later
               //this.dialogService.confirm("modal …

喜,

我有一个工作的应用程序.当我通过单击移动到子组件时它可以工作,但是当我在地址栏上写入路径时它不起作用.

RouterModule.forRoot([               
        {
          path:'',
          component:SiteComponent,
          children: [{              
            path:'portafolio/:id',
            component:OutletComponent              
          }
          ]
        },      
        {
          path:'**',
          redirectTo: '',
          pathMatch: 'full'
        },       
        ]),

当我导航到让我们说使用router.navigate(['/portafolio', portafolio.id])它的第一个投资组合工作正常.但是当我想通过写入地址栏localhost:4200/portafolio/1来导航到第一个投资组合时,它不起作用.它没有显示404错误.只显示'...',这是我<app-root>在index.html中的标签之间的内容.通配符工作正常,因为任何其他错误的地址重定向到SiteComponent.我如何解决这个问题,以便能够通过写入地址栏的路径来打开特定的portafolio？

更新:我将路由配置更改为:

RouterModule.forRoot([               
    {
      path:'',
      component:SiteComponent          
    },
    {  
      path: 'portafolio',
      component:SiteComponent,
      children: [{              
        path:':id',            
        component: OutletComponent
        }]          
    },      
    {
      path:'**',
      redirectTo: '',
      pathMatch: 'full'
    },       
    ])

相同的行为.它工作正常,直到我尝试使用地址栏访问任何投资组合.这是我得到的错误:

2:19 GET http://localhost:4200/portafolio/inline.bundle.js 
2:19 GET http://localhost:4200/portafolio/polyfills.bundle.js 
2:19 GET http://localhost:4200/portafolio/styles.bundle.js 
2:19 GET http://localhost:4200/portafolio/vendor.bundle.js 
2:19 GET http://localhost:4200/portafolio/main.bundle.js

这是自举组件:

import { Component } from '@angular/core';

@Component({
    selector : 'app-root',
    template: …

我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要目的是拥有单独的HTML和SCSS文件和路由逻辑.

截至目前,我正在渲染页面,ngIf这使得我的页面非常冗长.有办法实现这个目标吗？

<!--View 1-->
        <div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
            <!--View 2-->
            <div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>


    @Component({
      selector: 'register-page',
      templateUrl: './register-page.component.html',
      styleUrls: ['./register-page.component.scss'],
      providers : [RegisterService,Configuration,LocalStorageService]
    })
        ngOnInit() {
        this.registerView= "regView1";
      }

    changeView(view) {

          this.registerView= view;
      }

      previousView(view) {

          this.registerView= view;
      }