GVKun编程网logo

Angular 空路由器链接（angular路由配置）

19

对于Angular空路由器链接感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解angular路由配置，并且为您提供关于Angular2–通过路由器链接将对象从一个组件发送到另一个组件、Ang

对于Angular 空路由器链接感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解angular路由配置，并且为您提供关于Angular 2 – 通过路由器链接将对象从一个组件发送到另一个组件、Angular 2路由器在路由时刷新页面、angular2 – Angular 2.0路由器不工作重新加载浏览器、Angular2路由器(@角/路由器),如何设置默认路由？的宝贵知识。

本文目录一览：

Angular 空路由器链接（angular路由配置）

Angular 空路由器链接（angular路由配置）

如何解决Angular 空路由器链接？

在 angular 11 中，我正在动态渲染导航组件。所以有这样的代码：

<li [routerLinkActive]="active">
    <a [routerLink]="navItem.route">navItem.linkText</a>
</li>

这很好，除非我有一个导航部分，它实际上不是一条路线，而是触发子项打开。我仍然希望 routerLinkActive 正确应用该类，但我不希望它在任何地方导航。

路由值为空，但这不起作用，所以我尝试将其设置为一个空数组，如下所示：

<li [routerLinkActive]="active">
    <a [routerLink]="navItem.route ? navItem.route: []">navItem.linkText</a>
</li>

但空数组被解释为链接到我的主页，因此在初始渲染时主页链接被突出显示，但任何具有空路由的子项目也是如此。

有没有一种方法可以像我一样动态地创建一个 angular 导航，让 routerlinkactive 指令正确应用该类，但链接实际上不会在任何地方导航？

解决方法

这应该有效：

<li [routerLinkActive]="active">
    <a [routerLink]="navItem.route ? navItem.route: undefined">navItem.linkText</a>
</li>

Angular 2 – 通过路由器链接将对象从一个组件发送到另一个组件

Angular 2 – 通过路由器链接将对象从一个组件发送到另一个组件

我试图通过角度2的路由器链接发送一个对象.
我为我的人阵列中的每个人对象创建一个人物配置文件组件,并将其显示在我的屏幕上. 

<div *ngFor="#person of people; #i = index">
    <person-profile  [person]="person"></person-profile>
</div>

person-profile组件显示person对象中包含的几条信息.我试图使用路由器链接将人物对象组件中的整个人物对象发送到名为“map”的组件,并将人物对象作为参数传递.

<person-profile>
  ..code..
    <tr>
       <td>Address</td>
       <td>{{ person.visiting_address }}</td>
       <td *ngIf="person.visiting_address"><a [routerLink]="['Map',{person:person}]">View on map</a></td>
    </tr>
..code..
<person-profile>

在我的地图组件中,我检索对象：

var person = <any> routeParams.get('person');

问题是我每次都在地图组件中得到同一个人,无论哪个< person-profile>我执行路由器链接.它始终是人民名单中的第一人.奇怪的是,如果我传递来自person对象的特定参数,它就可以工作.例如,如果我传递person.family_name而不是整个person对象,一切正常,但我想发送整个对象.有什么建议？

谢谢！

解决方法

AFAIK无法传递对象,因为RouterLink类的源不表示对此的任何支持,并且因为数据需要在URL字符串中显示.

我的建议是传递一个ID并在允许按ID获取具体实例的服务中共享用户.

Angular 2路由器在路由时刷新页面

Angular 2路由器在路由时刷新页面

我正在尝试在学习Angular 2的同时设置一条简单的路线,每当我点击一个链接时,浏览器就会被路由到新的路线,但浏览器会重新请求所有资源(不像单页应用程序那样).

我的索引文件,

<!--... . .  varIoUs scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null,console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

应用来源,

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(RoutingApp,[ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS } from 'angular2/router';


@Component({
    selector : 'app',template :  `
        go to this <a href="javascript:void()"data="/link">link</a>
        <br />
        <router-outlet></router-outlet>

    `,directives: [ROUTER_DIRECTIVES],providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/link',name: 'Link',component: RouteComponent}
])
export class RoutingApp{

}

和RouteComponent

import {Component} from 'angular2/core'

@Component({
    template: `
        hello from RouteComponent
    `
})
export class RouteComponent{}

我做错了什么？ Angular版本是2.0.0-beta.7.

谢谢您的任何见解.

解决方法

您应该使用routerLink指令导航到路由： 

<a [routerLink]="['Link']">link</a>

由于您已将ROUTER_DIRECTIVES指定到组件的directives属性中,因此该指令可直接使用

angular2 – Angular 2.0路由器不工作重新加载浏览器

angular2 – Angular 2.0路由器不工作重新加载浏览器

我使用Angular 2.0.0-alpha.30版本。当重定向到不同的路由，然后刷新浏览器，它显示Can not GET / route。

你能帮我找出为什么这个错误发生了。

The error you are seeing is because you are requesting 07000 which doesn’t exist. According to 07001.

使用html5路由时，您需要将应用程序中的所有路由(当前为404)映射到服务器端的index.html。这里有一些选项：

>使用live-server：https://www.npmjs.com/package/live-server

$ live-server –entry-file = index.html

>使用Nginx：http://nginx.org/en/docs/beginners_guide.html

error_page 404 = 200 /index.html

Angular2路由器(@角/路由器),如何设置默认路由？

Angular2路由器(@角/路由器),如何设置默认路由？

如何在我的@Routes路由元数据收集中设置默认路由？如果您使用@ angular / router-deprecated中的angular2路由器，您可以在@routeConfig对象中定义路由，该对象是路由对象的集合，但是这些路由对象在其上具有更多属性。例如，它们具有’name’和’useAsDefualt’属性，而从@ angular / router定义的路由不是。我想使用新的路由器编写我的新应用程序，但是如何使用新的路由器并设置默认路由？

这是我的主要应用程序组件，它定义了我的路线：

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigManagerComponent } from './configManager/configManager.component';
import { ApplicationMgmtComponent } from './applicationMgmt/applicationMgmt.component';
import { MergeComponent } from './merge/merge.component';

import { ROUTER_DIRECTIVES,Routes } from '@angular/router';


@Component({
    selector: 'app-container',templateUrl: 'app/app.component.html',directives: [ROUTER_DIRECTIVES]
})

@Routes([

        { path: '/Dashboard',component: DashboardComponent },{ path: '/ConfigManager',component: ConfigManagerComponent },{ path: '/Merge',component: MergeComponent },{ path: '/ApplicationManagement',component: ApplicationMgmtComponent }
])

export class AppComponent { }

当我点击这样的锚标签时，路线定义似乎工作正常：

<li><a [routerLink]="['./Dashboard']">Dashboard</a>/li>

它转换到相关的路由。我唯一的问题是，当我的应用加载它没有路由活动。当我的应用程序启动时，我如何定义一个有效的默认路由？

谢谢！

V3-beta.2 
RouterConfig = [
  { path: '',redirectTo: '/heroes',pathMatch: 'full' },{ path: 'heroes',component: HeroComponent,children: [
      { path: '',redirectTo: '/detail',{ path: 'detail',component: HeroDetailComponent }
    ] 
  }
];

还有全部路线

{ path: '**',

它重定向“无效”网址。

V3-alpha(vladivostok)

使用路径/和redirectTo

RouterConfig = [
  { path: '/',redirectTo: 'heroes',terminal: true },children: [
      { path: '/',redirectTo: 'detail',component: HeroDetailComponent }
    ] 
  }
];

RC.1 @ angular / router

RC路由器不支持使用AsDefault。作为解决方法，您可以明确浏览。

在根组件中

export class AppComponent {
  constructor(router:Router) {
    router.navigate(['/Merge']);
  }
}

用于其他组件

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

  routerOnActivate(curr: RouteSegment,prev?: RouteSegment,currTree?: RouteTree,prevTree?: RouteTree) : void {
    this.router.navigate(['SomeRoute'],curr);
  }
}

今天关于Angular 空路由器链接和angular路由配置的分享就到这里，希望大家有所收获，若想了解更多关于Angular 2 – 通过路由器链接将对象从一个组件发送到另一个组件、Angular 2路由器在路由时刷新页面、angular2 – Angular 2.0路由器不工作重新加载浏览器、Angular2路由器(@角/路由器),如何设置默认路由？等相关知识，可以在本站进行查询。

本文标签：

上一篇重定向 PATCH 和 PUT 路由 rails 5 以使用 POST（portal重定向原理）

下一篇Heroku django3.2 部署损坏的 /admin 菜单，除 /admin 外，所有路由都适用于普通用户，CollectStatic 不适用于 heroku-live

相关文章