标签: angular2-routing

当我在Angular 2中更改路线时如何显示加载屏幕？

我来自Asp.Net MVC世界,用户试图访问他们未授权的页面会自动重定向到登录页面.

我试图在Angular上重现这种行为.我来到@CanActivate装饰器,但它导致组件根本没有渲染,没有重定向.

我的问题如下:

• Angular是否提供了实现此行为的方法？
• 如果是这样,怎么样？这是一个好习惯吗？
• 如果没有,在Angular中处理用户授权的最佳做法是什么？

在Angular 1.x中,我可以执行以下操作来创建一个基本上什么都不做的链接:

<a href="">My Link</a>

但是相同的标签会导航到Angular 2中的应用程序库.

与Angular 2相同的是什么？

编辑:

它看起来像Angular 2路由器中的一个错误,现在github上存在一个未解决的问题.

我正在寻找一个开箱即用的解决方案或确认没有任何问题.

我想传递一个查询参数prop=xxx.

这没用

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>

我在angular2应用程序中的路由效果很好.但我将基于此做一些routeLink :

这是我的路线:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

这是我做的链接:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

我希望,当我点击它们时,它会导航到受尊重的组件,但它们不执行任何操作？

我想在用户离开我的angular 2应用程序的特定页面之前警告用户未保存的更改.通常我会使用window.onbeforeunload,但这不适用于单页面应用程序.

我发现在角度1中,你可以挂钩$locationChangeStart事件confirm为用户抛出一个盒子,但我还没有看到任何显示如何使角度2工作,或者如果该事件仍然存在.我也见过为ag1提供功能的插件onbeforeunload,但同样,我还没有看到任何方法将它用于ag2.

我希望其他人找到解决这个问题的方法; 任何一种方法都可以用于我的目的.

我正在使用角度2,谷歌地图等制作房地产网站.当用户更改地图的中心时,我执行搜索到api,指示地图的当前位置以及半径.问题是,我想在不重新加载整个页面的情况下在URL中反映这些值.那可能吗？我找到了一些使用AngularJS 1.x的解决方案,但没有关于angular 2的解决方案.

我们已经完成了一个angular2项目设置和内部创建了一个模块(my-module),并在该模块内部使用以下cmd命令创建了一个组件(my-new-component):

ng new angular2test
cd angular2test
ng g module my-module
ng generate component my-new-component

在创建设置和所有组件之后,我们ng test从angular2test文件夹中的cmd 运行命令.

下面的文件是我的my-new-component.component.ts文件:

import { Component, OnInit } from '@angular/core';
import { Router, Routes, RouterModule } from '@angular/router';
import { DummyService } from '../services/dummy.service';

@Component({
  selector: 'app-my-new-component',
  templateUrl: './my-new-component.component.html',
  styleUrls: ['./my-new-component.component.css']
})
export class MyNewComponentComponent implements OnInit {

  constructor(private router : Router, private dummyService:DummyService) { }

  ngOnInit() {
  }
    redirect() : void{
        //this.router.navigate(['/my-module/my-new-component-1'])
    }
}

下面的文件是我的my-new-component.component.spec.ts文件:

/* tslint:disable:no-unused-variable */
import { …

最近,我开始玩角度2.到目前为止它真棒.所以,为了学习使用,我已经开始了一个演示个人项目angular-cli.

通过基本的路由设置,我现在想要从头部导航到一些路由,但由于我的头部是父的router-outlet,我收到此错误.

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

  <a [routerLink]="['/signin']">Sign in</a>

现在我部分理解我猜,因为该组件是一个包装器,router-outlet所以不可能通过这种方式访问router.那么,是否有可能从外部访问导航这样的场景？

如果需要,我会很乐意添加更多信息.先感谢您.

更新

1-我package.json已经有了稳定的@angular/router 3.3.1版本.2-在我的主app模块中,我已经导入了routing-module.请看下面.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from …

我有一个父组件进入服务器并获取一个对象.

// parent component

@Component({
    selector : 'node-display',
    template : `
        <router-outlet [node]="node"></router-outlet>
    `
})

export class NodeDisplayComponent implements OnInit {

    node: Node;

    ngOnInit(): void {
        this.nodeService.getNode(path)
            .subscribe(
                node => {
                    this.node = node;
                },
                err => {
                    console.log(err);
                }
            );
    }

在(孩子中的一个)我的孩子展示

export class ChildDisplay implements OnInit{

    @Input()
    node: Node;

    ngOnInit(): void {
        console.log(this.node);
    }

}

看起来我没想到只能将数据注入路由器插座.看起来我在Web控制台中收到了错误...

Can't bind to 'node' since it isn't a known property of 'router-outlet'.

这有点道理,但我怎么做以下......

// parent component

@Component({
    selector : 'node-display',
    template : …