GVKun编程网logo

Angular2路由路径样式参数（angular的路由）

3

以上就是给各位分享Angular2路由路径样式参数，其中也会对angular的路由进行解释，同时本文还将给你拓展Angular2路由器不能处理传递的多个参数、Angular2路由器中的非Url参数、a

以上就是给各位分享Angular2路由路径样式参数，其中也会对angular的路由进行解释，同时本文还将给你拓展Angular 2路由器不能处理传递的多个参数、Angular 2路由器中的非Url参数、angular2-routing – 到同一组件的Angular 2路由、Angular2路由等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

Angular2路由路径样式参数（angular的路由）

Angular2路由路径样式参数（angular的路由）

使用@ angular / router版本3.0.0-beta.2我想构建一个允许我的用户浏览文件系统的应用程序.

以下说明了我想支持的URL类型：

http://myapp/browse                   <--- browse without parameters,lists root dir
http://myapp/browse/animals           <--- browse "animals" subdirectory
http://myapp/browse/animals/mammals   <--- browse "animals/mammals" subdirectory

我正在努力想出一个使用RouterConfig配置它的机制.

路径式参数

{ path: 'browse/:path',component: browserComponent }

此RouterConfig仅支持单个子目录,即browse / animals.但是,如果我尝试浏览到二级子目录/ browse / animals / mammals,我会收到以下错误：

Error: Cannot match any routes: '/browse/animals/mammals'

据我所知,路由器中参数的默认行为(在本例中为：path)是在第一个正斜杠上“中断”,并假设以下标记是子路径.

如何配置路由器以允许：path参数接受正斜杠/“gobble”整个剩余的URL作为参数？

可选参数

如何处理用户希望浏览根目录的用例,即URL /浏览.这与上述路由器配置不匹配,因为：path参数不存在.

我试图使用两个明确配置的路由器路径来解决这个问题：

{ path: 'browse',component: browserComponent },{ path: 'browse/:path',component: browserComponent }

但是,这导致了routerLinkActive的问题.我有一个主菜单,其中包含指向浏览器的链接,如下所示：

<a [routerLink]="['/browse']" [routerLinkActive]="['active']">...</a>

如果用户浏览到root / browse或某个子目录/ browse / animals /,我希望这个主菜单链接有活动类.

但是,如果/ browse / animals / URL不是/ browse路由的子节点,则它不会变为活动状态.

我不能让：path参数路由/ browse根目录的子进程,因为不需要嵌套视图,它会导致：

Cannot find primary outlet to load browserComponent

解决方法

基于@DaSch的**建议,确实可以使用通配符路由： 

{ path: '/browse',component: browserComponent,children: [ { path: '**' } ] }

在browserComponent中不需要嵌套路由器出口,因为子路径上没有指定组件字段.

根据需要,现在将为所有描述的URL路由browserComponent：

http://myapp/browse
http://myapp/browse/animals
http://myapp/browse/animals/mammals

现在的挑战是获取表示浏览器导航到的路径的URL,并在用户导航时订阅更改.

我使用路由器对此进行了原型设计：

router.events.filter(e => e instanceof NavigationEnd)
  .forEach((event: NavigationEnd) => {

    // The root route belongs to "/browse"
    let parentRoot: ActivatedRoute = router.routerState.root.firstChild;
    if (parentRoot.snapshot.url.map(p => p.path).join("/") == "/browse") {

      let path: string = "";

      // Child route is optional,in case the user has browsed to just "/browse"
      let childRoute: ActivatedRoute = parentRoot.firstChild;
      if (childRoute) {
        path = childRoute.snapshot.url.map(p => p.path).join("/");
        console.log("New browser path is ",path);
      }

      this.loadpath(path);
    }
  }
);

Angular 2路由器不能处理传递的多个参数

Angular 2路由器不能处理传递的多个参数

我创建了一个示例plunker,将多个参数传递到下一页,但它不起作用.这是一个plunker演示,点击项目后危机中心路由不起作用.

http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview

onSelect(crisis: Crisis) {
    // Navigate with Absolute link
    //this.router.navigate(['/crisis-center',1]); //this is working.
     this.router.navigate(['/crisis-center',{ id: '1',id2:'2'}]); //this is not working
    }

//下面是路线：

//{ path: 'crisis-center/:id',component: CrisisDetailComponent } //-- this is working
  { path: 'crisis-center/:id /:id2',component: CrisisDetailComponent},// this is not working

ngOnInit() {
    this.sub = this.route
      .params
      .subscribe(params => {
        let id = +params['id'];
        let id2 = +params['id2']; //Unable to read id and id2 values
        this.service.getCrisis(id)
          .then(crisis => {
            if (crisis) {
              this.editName = crisis.name;
              this.crisis = crisis;
            } else { // id not found
              this.gotoCrises();
            }
          });
      });
  }

我有三个分层导航,它从危机中心转移到危机细节,然后从危机细节转移到> transactiondetail.因此,在我导航到危机细节之后,我想通过危机等待和危机等待,以便遍历细节,然后再回到危机清单.

我试图传递多个参数在这里有人有这个问题？

此外,我想隐藏浏览器URL中的URL参数并显示别名,以前用作“as”关键字现在它不起作用.

任何帮助赞赏

解决方法

使用路由器组件(来自’@ angular / router’,而不是’@ angular / router-deprecated’),您将传递多个参数,如下所示： 

this.router.navigate(['/crisis-center',1,2]);

你试图这样做：

this.router.navigate(['/crisis-center',id2:'2'}]); //this is not working

因为您已将对象作为第二个参数传递,所以您传递的是查询参数而不是路由器参数.所以,它的URL是：

localhost:3000/crisis-center;id=1&id2=2

你可以在这里阅读更多相关信息：https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Angular 2路由器中的非Url参数

Angular 2路由器中的非Url参数

在角度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路由器中重现上述行为？

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

你问的问题更多是关于 component to component communication而不是路由本身.您需要的是将数据从一个组件(与特定路由相关联)传递到另一个组件(与另一个路由相关联).

可以通过以下方式实现组件到组件的通信

>具有父子关系的组件可以通过@input()和@Output()装饰器和事件发射器传递数据
> Via the use of a service.不共享驻留在同一模块中的父子关系的组件可以通过服务共享数据,或者通过使用Observable序列(具有生产者 – 消费者模型),或者通过在变量中设置数据并相应地读取.通过向根(或两者为父)模块注册服务,可以将此方法扩展到驻留在不同模块中的组件.
>通过路由器.数据可以通过路由器作为路径参数传递,例如：my / path / thisisapathvalue,optional parameters(使用矩阵表示法),例如my / path; item = hello; item2 = world或通过查询字符串参数,例如my / path？item = hello& ; ITEM2 =世界.您还可以使用resolve guards解析特定组件的数据,该解析可以解析静态数据,从服务器检索的数据,通过函数解析等.

对于您的场景,您最需要的是一个服务,它将源组件与目标组件之间的数据进行通信,因为即使使用解析保护来解析数据,您也需要一个额外的服务来临时存储数据.你需要通过.

angular2-routing – 到同一组件的Angular 2路由

angular2-routing – 到同一组件的Angular 2路由

我已经使用标记为“depricated”的路由器升级了Angular 2,并开始在rc5和rc6中使用“new”路由器.但是现在我遇到了一个问题(从rc5开始,在rc6中仍然是相同的),其中有一个组件需要导航到相同的组件但具有不同的参数(以获取其他数据,然后是视图中的那个已经完成,基于关于参数).

在depricated路由器中,每次使用this.router.navigate导航到组件时,都会调用构造函数和AfterViewInit等.在新的路由器中,在相互之后再次调用相同的组件时,不会调用构造函数和其他内容.所以我猜有一些“神奇”/缓存正在发生.另请注意,在组件中我发送了一个必需参数和一些可选参数,因此链接看起来像这样：http://localhost:2222/mycomponent/1;someotherparam=123

是否有任何方法可以在每次导航时强制创建组件？

解决方法

看看Angular 2的 Rangle.io guide.

特别是阅读路线参数部分

The reason that the params property on ActivatedRoute is an Observable is that the router may not recreate the component when navigating to the same component. In this case the parameter may change without the component being recreated.

因此,您的组件将不会被重新创建,但您可以订阅您感兴趣的路径部分(params,data,fragment,queryParams)中的更改,并将这些初始化方法称为subscribe()回调.

Angular2路由

Angular2路由

我在Angular中遵循 this路由教程,它只是不起作用.当我使用’comp’选择器来放置它的HTML代码时,它可以工作,但当我尝试使用router-outlet路由它时,它只显示index.html的标题.

我有以下内容：

main.ts：

import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
    selector: 'my-app'
})
@ng.View({
    directives: [ng.formDirectives,ng.RouterOutlet],template: `
    <nav>
      <ul>
        <li>Start</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
@ng.RouteConfig([{ path: '/',component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent,[ng.routerInjectables]);

comp.ts：

import * as ng2 from 'angular2/angular2';
@ng2.Component({
    selector: 'comp'
})
@ng2.View({
    template: `
    <h1>hi<h1>
  `
})
export class Comp {
    constructor() {
    }
}

index.html的：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <title>Test3</title>
    <script src="lib/traceur/traceur.js"></script>
    <script src="lib/system.js/dist/system.js"></script>
    <script src="lib/angular2-build/angular2.js"></script>
    <script src="lib/angular2-build/router.dev.js"></script>
    <script>
        System.config({
            packages: { 
                'js': {
                    defaultExtension: 'js'
                } 
            }
        });
        System.import('/js/main');
    </script>
</head>
<body>
    <h1>Hello There</h1>
    <my-app></my-app>
</body>
</html>
在angular@2.0.0-alpha.41中引入了重大变化

> routerInjectables已重命名为ROUTER_BINDINGS
>然后将ROUTER_BINDINGS重命名为ROUTER_PROVIDERS

旁白：最近发生了很多重大变化,因此几乎所有在线示例都不可靠.

使用ROUTER_PROVIDERS

这包括：

> RouteRegistry – 已定义路线的注册表
> LocationStrategy = PathLocationStragety – 按路径匹配路线

这基本上是使用默认设置引导路由器的快捷方式.

例如：

@Component ({
...
})
@View ({
...
})
@RouteConfig ({
...
})
class App {}

bootstrap(App,[ ROUTER_PROVIDERS ]);

资料来源：

> angular/CHANGELOG.md
> angular/pr#4654

我们今天的关于Angular2路由路径样式参数和angular的路由的分享就到这里，谢谢您的阅读，如果想了解更多关于Angular 2路由器不能处理传递的多个参数、Angular 2路由器中的非Url参数、angular2-routing – 到同一组件的Angular 2路由、Angular2路由的相关信息，可以在本站进行搜索。

本文标签：

上一篇Angular 2 RC 2如何将路由器注入自定义ExceptionHandler（angular service注入）

下一篇Angular2设置默认路由（angular配置路由）

相关文章