使用ASP.NET Core 1.0的MVC 6的RC1,您可以在调用时映射函数内的路径.我已经映射了一个"spa-fallback"路由,它将确保和视图是默认值,如下所示:Startup.Configureapp.UseMvcHomeControllerIndex
public void Configure(IApplicationBuilder app,
IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
// ... omitted for brevity
app.UseExceptionHandler("/Home/Error");
app.UseStatusCodePagesWithRedirects("/Home/Error/{0}");
app.UseMvc(routes =>
{
routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
routes.MapRoute("spa-fallback", "{*anything}", new { controller = "Home", action = "Index" });
routes.MapWebApiRoute("defaultApi", "api/{controller}/{id?}");
});
}
我希望回退,以便我的Angular2应用程序的路由不会导致HTTP状态代码404,Not Found.但是,当用户无意中尝试导航到不存在的页面视图时,我还需要正确处理.你可能会注意到我也打过电话app.UseStatusCodePagesWithRedirects("/Home/Error/{0}");.
使用状态代码和"spa-fallback"路由重定向到我的错误页面的调用似乎是互斥的 - 这意味着我似乎只能拥有一个或另一个(但遗憾的是不是两者).有谁知道如何才能让两全其美？
我正在尝试使用哈希位置策略创建应用程序,但它不会将哈希添加到URL.例如,当我点击与{path:'/ polls',name:'Polls',component:PollsComponent}关联的按钮时,它会使用此url加载页面:localhost:3000/polls.
我需要更改以获取哈希位置策略？如果我想使用哈希位置策略,为什么必须设置默认基本URL？
这是app.component.ts中的路由,其中定义了所有路由:
import {Component} from 'angular2/core'
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import 'rxjs/Rx'; // load the full rxjs
import {ROUTER_PROVIDERS, RouteConfig , ROUTER_DIRECTIVES} from 'angular2/router';
import { ResultsComponent } from './results/results.component'
import { VotingCardsComponent } from './votingcards/votingcards.component'
import { DashBoardComponent } from './dash/dash.component'
import { PollsComponent } from './pollslist/pollslist.component'
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES, ResultsComponent, VotingCardsComponent, DashBoardComponent],
providers: [HTTP_PROVIDERS,
ROUTER_PROVIDERS]
})
@RouteConfig([
{ path: '/vote', name: 'VotePage', component: VotingCardsComponent },
{ path: '/votepoll/:id', name: 'VotePoll', component: …自beta以来我一直在尝试Angular 2,现在有了rc.0 +,有些东西已经改变了.
其中一个是RouteParams,无法从@ angular/router导入.当我尝试使用@ angular/router-deprecated时,我收到一条错误消息:
原始例外:没有RouteParams的提供商!
app.component:
@Routes([
{ path: '/', component: StartComponent },
{path: '/:projId/:userName', component: ProjectListComponent},
{ path: '*', component: StartComponent },
])
项目list.component:
import {Component, OnInit} from '@angular/core';
import {RouteParams} from '@angular/router-deprecated';
@Component({
...
})
export class ProjectListComponent implements OnInit {
userName:string;
projId:string;
constructor(private params:RouteParams) {
this.userName = params.get('userName');
this.projId = params.get('projId');
}
}
从现在开始我可以在哪里导入RouteParams,或者是其他我做错了什么？
谢谢!
曾经用于beta/...的工作已不再适用.使用新的新RC1路由器,我该如何进行子路由？
文件夹结构
app
|--home/
| |--home.component.ts
|--login/
| |--login.ts
|--appShell/
| |--app.component.ts
|--apps/
|--hero/
|--hero-shell.component.ts
|--horees.component.ts
|--hero-detail.component.ts
计划的导航是
app.component -> home.component -> heroshell.component -> heroes.component
app.component.ts路线
@Routes([
{ path: '/heroshell', component: HeroShellComponent },
{ path: '/home', component: HomeComponent },
{ path: '/login', component: Login },
])
export class AppComponent implements OnInit {
title = 'Apps';
constructor(public _auth: Authentication,
public router: Router,
private _dialogService: DialogService
) {}
ngOnInit() {
this.router.navigate(['/login']);
}
.......
登录成功后,Login类将会
this.router.navigate(['/home']);
从HomeComponent.ts我可以做到
this.router.navigate(['/heroshell']);
到目前为止这么好,没问题.在hero-shell.component.ts中我有子路由
@Component({
selector: 'my-app1',
templateUrl: …我上周刚刚开始深入挖掘Angular 2并且(显然有很多其他人)在路由方面遇到了一些严重的问题.我开始使用路由器3.0.0-alpha.7.我真正想要做的是在我的基础组件中与这些子组件共享一些检索到的数据.这是我的路线配置.
[{
path: 'base/:id',
component: BaseComp,
children: [{
path: '',
component: OverviewComp
}, {
path: 'docs',
component: DocsComp
}]
}]
当基本路由被命中时,我正在通过基于:id参数的服务检索一些数据.收到这些数据后,我希望它可以级联给孩子们.我希望它就像在OverviewComp和DocsComp上放置@Inputs一样简单,但我很快意识到,考虑<router-outlet>到实际的模板组件,似乎没有任何方法可以在模板中执行此操作.DERP.
有没有人想过做这种事情的最佳方法是什么？
我应该使用早期的路由器版本(路由器已弃用)吗？
如果该id参数被移动到子组件？
子组件是否只是命中服务以获取相同的数据(缓存)？
有href没有办法没有重定向回angular2中的根？因为我有这个<a href="" (click)="modal.open()"></a>代码打开一个模态,但它将我重定向回我的主页.
我知道它因为routeConfig有角度,但有没有办法说旁路呢？
{ path: '', component: LoginComponent, pathMatch: 'full'},
请注意,如果完全删除href有效,则可能没有检查w3c验证.
const APP_ROUTES: RouterConfig = [
{
path: 'app/home',
component: HomeComponent,
data: {
name: 'Home'
}
}
]
如果我有如上所示的路由配置,我如何data从某个指令访问其属性.
@Directive({
name: 'hello'
})
class HelloDirective {
@Input('routerLink') link: string[];
ngOnInit() {
//HOW CAN I GET ROUTE AND ITS DATA FROM PATH/URL ???
//const magicallyGrabbedRoute = pleaseGiveMeMyRouteFrom(this.link);
//const myData = magicallyGrabbedRoute.data;
}
}
<a hello [routerLink]="['app/home']"> Go Home </a>
在hello指令中如何获取routerLink属性值的路由配置？
我有角色queryParams和params应用程序中的网址.而且我遇到了问题:重新加载页面后我的网址被扭曲了.
用params:
重装后:
用queryParams:
重装后:
routes.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { AlbumsComponent } from './components/albums/albums.component';
import { AddAlbumComponent } from './components/albums/add-album.component';
import { AddImageAlbumComponent } from './components/albums/add-image-album.component';
import { AlbumDetailComponent } from './components/albums/album-detail.component';
import { PhotosComponent } from './components/photos/photos.component';
import …我正在使用AngularJS 2.4.6,Typescript 2.1.2,IIS 8.0,Chrome,Visual Studio 2015
我正在使用Angular Heroes教程并注意到当我刷新浏览器时我得到了404响应(由于PathLocationStrategy -aka HTML5路径 - 默认使用)...所以这是有道理的,因为IIS看不到/仪表板返回.
有很多解决方案使用URL重写,我做了,确实正确地路由到index.html.
我的问题是,当我刷新浏览器时,我希望它处于相同的状态.这与使用哈希策略的角度1.5一样好用.
我是否需要做一些特定的事情来创建这种行为？原样(Angular 2.0),刷新结束导致基本状态显示而不是我所在的状态.
我注意到Rewrite操作将301发送回浏览器,因此index.html再次不知道预期的状态.
重要的是,外部链接(例如,从电子邮件中)到Angular 2 app特定状态的工作方式如何？
例如,如果我发送一封包含我的应用程序链接的电子邮件,例如:
https:// myserver/some/path/to/aState
这个简单的场景似乎不适用于我尝试过的所有内容.
该项目不涉及MVC.客户端代码向webapi middletier web发出ajax请求,但出于我要求的目的,你可以假设根本没有http调用.
是否可以做类似的事情：
<ul>
<li *ngFor="let language of languages">
<a [routerLink]="['#' + language]">{{language}}</a>
</li>
</ul>
要么
<ul>
<li *ngFor="let language of languages">
<a fragment="language">{{language}}</a>
</li>
</ul>
保持不变url并添加#en，#es还是#fr取决于language值是多少？我不能使它工作。