标签: angular2-routing

Angular2路由器 - 任何人都知道如何在app.ts中使用canActivate,以便我可以重定向到主页,如果没有登录

我正在使用打字稿和角度2.

在我的app.ts文件中我的构造函数下的当前尝试:

   canActivate(instruction) {           
               console.log("here - canActivate");
               console.log(instruction);

               this.router.navigate(['Home']);  
   }

它目前没有被击中.知道为什么吗？

我使用了一些来自github的漂亮而简单的拖放库,我有一个带有3个不同按钮的视图,每个按钮在同一个地方点击时都会显示一个列表,但不是在同一时间.

从某种原因,只有第一个列表可以排序,但另外2个没有...我可以移动对象,但它们不可丢弃,所以我不能改变顺序.

这是我的HTML:

<div>
  <!-- list 1 button -->
  <button md-button
          (click)="showFirstList()"
          class="md-primary">List 1
  </button>

  <!-- list 2 button -->
  <button md-button
          (click)="showSecondList()"
          class="md-primary">List 2

  </button>

  <!-- list 3 button -->
  <button md-button
          (click)="ThirdList()"
          class="md-primary">List 3

  </button>
</div>


        <md-content>

          <div *ngIf="showingListOne">
            <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">
              <div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
                ID: {{item.id}} <p></p> name: {{item.name}}
              </div>
            </div><br><br>
          </div>


          <div *ngIf="showingListTwo">
            <div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">
              <div …

试图在angular2 rc中延迟加载模块.应用程序.该模块本身包含路由.该应用程序试图懒惰加载模块点击它注册的路线,但立即抛出

Error: Uncaught (in promise): Error: Cannot find 'default' in './app/test/test.module'

应用中的路由定义如下:

export const routes: Routes = [
  { path: '', component: StartComponent },
  { path: 'route1', component: Route1Component },
  { path: 'test', loadChildren: './app/test/test.module'},
  { path: '**', component: StartComponent } //page not found
];

TestModule包含以下路由:

export const TestRoutes: Routes = [
      { path: '', redirectTo: 'overview' },
      { path: 'overview', component: TestOverviewComponent },
      { path: 'moredata', component: MoreDataComponent }
];

我删除了redirectTo并将默认路由指向一个真正的组件而没有运气.还尝试用像孩子一样定义路线

export const AdminRoutes: Routes = [
  { …

我需要能够模拟激活的路由参数才能测试我的组件.

到目前为止,这是我最好的尝试,但它不起作用.

{ provide: ActivatedRoute, useValue: { params: [ { 'id': 1 } ] } },

ActivatedRoute在实际组件中使用如下:

this.route.params.subscribe(params => {
    this.stateId = +params['id'];

    this.stateService.getState(this.stateId).then(state => {
        this.state = state;
    });
});

我目前尝试的错误很简单:

TypeError: undefined is not a constructor (evaluating 'this.route.params.subscribe')

任何帮助将不胜感激.

比方说,我们有两个途径Dashboard和Profile.Dashboard有动态标签功能Google spreadsheet.我想做一些交互(构建图表,可视化一些数据)创建标签Dashboard.现在,如果我路由到Profile然后路由回去Dashboard,我想看看之前在那些标签中的内容Dashboard.这意味着,我想在客户端保持状态.AFAIK在组件之间进行路由时,会重新创建组件.是否可以在使用角度2路由时制作类似应用程序的电子表格？我需要使用路由,因为在我的应用程序中我必须使用LazyLoading功能.

那么这个想法应该是什么？我是角度2的新手.

使用Angular 4.1.3,我正在开发一个延迟加载各种工具模块的地图应用程序.目前,有一个路由器插座,可将工具放置在地图中.但是,我需要支持将工具放在地图旁边的新选项卡中.该选项卡是动态创建的,以响应加载工具模块,并且可以同时打开多个选项卡.

创建选项卡组件很简单,似乎在新选项卡中放置动态组件加载器(https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html),这是合理的将工具放在选项卡中的方法.但是,我不知道如何实际获取对工具组件的引用以将其传递给加载器,因为它是延迟加载模块的一部分.有没有办法让路由器将此传递给我的app.component而不是通过路由器插座输出？我已经考虑过将路由器插座放在一个隐藏的div中,然后在控制器中绑定它,但这看起来很糟糕,我不确定它是否会起作用.

我见过的一些类似的问题/答案似乎依赖于SystemJS,但我正在使用Webpack.

编辑:我在这里运行了一个基本的plunker:http://plnkr.co/edit/RPbyQZ4LyHN9o9ey2MJT？p = preview

那里的代码有一个非常基本的组件动态添加到选项卡

  export class ContentPaneComponent implements OnInit {
  @ViewChild('contentpane') el: ElementRef;

  @Output() newContent: EventEmitter<any> = new EventEmitter();

  private content: string;
  private contentSubscription: Subscription;

  private tab1 = new CompItem(htmlPaneComponent, {});
  // private tab2 = new CompItem(LayerManagerComponent, {});

  ngOnInit(): void {
  }

}

tab1中指定的组件必须包含在content-pane.module的entrycomponents中 entryComponents: [htmlPaneComponent]

最终,我希望CompItem()在模块延迟加载时创建新的.当我激活路线时,例如:

{
    path: 'search', loadChildren:
    'components/conference-room-search/conference-room-search.module#ConferenceRoomSearchModule'
        }

我认为我需要的是路由器给我一个模块或其组件的参考.

在角度1.*中,我使用ui-router并且能够将NON URL参数从一个状态传递到另一个状态.通过NON URL参数,我的意思是传递一些不出现在URL上的参数(这对用户来说是完全透明的).

在Angular 1.*中执行此操作的方法是通过定义这样的状态(stateToRedirect是非url参数)

   $stateProvider
    .state('LOGIN_STATE', {
      url: `login`,
      component: 'login',
      params: {
        stateToRedirect: 'home'
      }
    });

并改变这样的状态:

  $state.go('LOGIN_STATE', {
    stateToRedirect: 'OTHER_STATE',
  });

在LOGIN_STATE中,我能够访问此参数:

$stateParams.stateToRedirect;

我正在尝试为Angular 2路由器找到相同的行为,我的理解是Angular 2路由器已经改进了很多,我们可能不需要使用ui-router-ng2.

所以我的问题是:你如何在Angular 2路由器中重现上述行为？

这个问题似乎是我想要的,但我不想在URL中使用参数,并且路径上的'data'属性看起来不错,但我找不到关于如何动态设置它的文档.

我正在尝试使用嵌套子组件中的按钮切换位于主App模板顶部的侧面导航菜单.我无法弄清楚如何到达父级中的sidenav组件来告诉它sidenav.open().

我知道子组件上的@Input和@Output,但据我所知,要使用它,我需要为子组件添加某种DOM标记来附加它们吗？如:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>

关于如何做到这一点的文章很多.问题是我正在路由到此组件,因此<child>代码中没有明确存在标记.相反,我的代码是这样的:

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <router-outlet></router-outlet>
</app>

如果我有一个子组件被路由到,我该怎么做sidenav.open()或以某种方式访问​​孩子的父组件？

一些想法:我已经做了一些研究并思考了几种方法,并且不确定它们是否正确或甚至可以工作......一种方法是使用Injector服务并尝试遍历父母,但这感觉不对:

// child component
constructor(injector: Injector) {
  this.something = injector.parent.get(Something);
}

或者可能在父级中创建一个服务,以某种方式附加到Sidenav组件,然后将此服务注入到子级中？

我已经创建了一个github存储库,它有一个完美的问题示例.

https://github.com/rjriel/dynamic-route-example

这个回购中代码的重要部分是 app.module.ts

let mainRoutes: Routes = [{
  path: "first",
  component: FirstComponent
}]

mainRoutes.push({
  path: "second",
  component: SecondComponent
})

@NgModule({
...
  imports: [
    RouterModule.forRoot(mainRoutes),

在开发中运行此代码(即.ng serve)时,两个路由都正确导航.但是,在生产中运行此代码(即.ng serve --prod)时second,添加的路由会mainRoutes.push导致以下错误:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'second'
Error: Cannot match any routes. URL Segment: 'second'
    at t.BkNc.t.noMatchError (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.selector (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)
    at …

鉴于以下路线:

path: '',
component: MyComponent,
resolve: {
    foo: FooResolver,
    bar: BarResolver
}

有没有办法告诉angular执行第一个解析器FooResolver,只有BarResolver在第一个解析器完成后才执行第二个解析器？