开始学习angular2 beta组件路由.到目前为止我已经这样做了.
http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview
我复制了以下必需的CDN.请看看这里.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>
SRC/boot.ts
import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';
@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<nav>
<a [routerLink]="['ComponentOne']">One</a><hr/>
<a [routerLink]="['ComponentTwo']">Two</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:'/component-one', name: 'ComponentOne', component: ComponentOne},
{path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent { }
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
SRC /锥
import {Component,View} from …如何检测子组件的路由更改？这是我尝试过的,但我只看到app组件跟踪路由更改.我希望能够检测到url在MetaDetailView组件中从#/ meta/a/b/c变为#/ meta/a/b/c/d的时间.
@RouteConfig([
{ path: '/', name: 'Home', redirectTo: ['Meta']},
{ path: '/meta/...', name: 'Meta', component: MetaMainComponent, useAsDefault: true},
...other routes...,
])
export class AppComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("app.url = " + url));
}
}
@RouteConfig([
{ path: '/*other', name: 'Detail', component: MetaDetailViewComponent, useAsDefault: true},
])
export class MetaMainComponent {
constructor(private _router: Router) {
_router.subscribe( (url) => console.log("metamain.url = " + url));
console.log("MetaMainComponent")
}
}
export class MetaDetailViewComponent {
constructor(private _router: Router) {
_router.subscribe( …我有一个angular2页面显示了一个项目列表.我最初使用路由参数来限制列表,所以我的URL是这样的:
http:// localhost:54675 /#/ listing？filter = {"Country":[6,7]}
这将显示ID为6或7的国家/地区的项目.
然后用户添加第三个国家(比方说8),然后进行服务调用以更新列表.由于列表项绑定到可观察的列表,因此在屏幕上更新.
这正是我想要的行为.但是,如果用户为此页面添加书签,则他们只获取原始路由参数,而不是过滤结果.
为了解决这个问题,我使用:
this._router.navigate(['listing', { filter: newfilter }]);
这将使用此路由重新加载页面:
http:// localhost:54675 /#/ listing？filter = {"Country":[6,7,8]}
这可以使所有内容保持同步并且书签正常工作 但是,有一个完整的页面刷新.其他项目再次加载 - 不仅仅是过滤后的结果.当它只是一个服务电话时,我也更喜欢视觉效果.
我需要一种方法来更改路由参数,而无需重新加载页面.
我上周刚刚开始深入挖掘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验证.
我有角色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调用.
我正在尝试使用以下方法从一个组件导航到另一个组件:
this.router.navigate(['/path/'], '_blank');
问题是我导航到的组件已经创建,当我导航回页面时,它的ngOnInit方法没有被执行.我正在尝试刷新页面上显示的数据.这是在目标组件的ngOnInit函数中:
this.sub = this._DataService.getData().subscribe(data=> {
this.data= data;
});
如何告诉目标组件,在进行导航时,页面上的数据总是会刷新？
我正在使用Ag-Grid在表格中显示数据.在NgOnInit函数中:
this.gridOptions.rowData = this.data;
我最初来自的组件是一个添加新对象的表单.提交该对象后,它应重定向到网格并显示新对象.这就是网格应该更新其数据的原因,但是由于某种原因,只有当我通过网格中的上下文菜单操作而不是导航手动刷新它时才会这样做.
表单中的提交函数如下所示:
onSubmit(data) {
this._DataService.addData(data.value).subscribe();
this.router.navigate(['/data/']);
}
我有canActivate: [ AuthGuard ]里面的路由器和验证AuthGuard
如何强制检查canActivate相同的路由器URL？
例如:当前路线是/admin,我有事件喜欢session expired.我有会话签入,AuthGuard但只有在我执行时才会激活此检查.navigate(...).如何强制canActivate在同一地点运行？
我试过了:this.router.navigate([ this.router.url ]);但角度检查相同的位置,什么都不做.
ps我可以找到"登录页面"或其他页面session expired event,但我有所有重定向内部AuthGuard,我不想在所有其他事件中重复相同的重定向,我只需要location.reload()在Angular2路线中.
主要问题听起来像:如何强制canActivate在当前位置重新运行警卫？
如果Angular 2应用程序不支持浏览器,我在演示警告页面时遇到问题.我曾尝试使用路由系统,但实际上它并没有帮助.这是我的索引页面.如果浏览器不受支持,如何重定向(显示给用户)警告页面？也许我需要在body上添加一些额外的脚本,但是<app>标签呢？
<!DOCTYPE html>
<html>
<head>
<base href="/">
</head>
<body>
<app>Loading...</app>
</body>
</html>